Add wrapper for before/after code examples

website/_includes/_mixins.jade

@@ -149,6 +149,10 @@ mixin code(label, language, prompt, height, icon, wrap)
 
 //- Code blocks to display old/new versions
 
+mixin code-compare()
+    span.u-inline-block.u-padding-top.u-width-full
+        block
+
 mixin code-old()
     +code(false, false, false, false, "reject").o-block-small
         block

website/assets/css/_base/_utilities.sass

@@ -143,6 +143,9 @@
 
 //- Layout
 
+.u-width-full
+    width: 100%
+
 .u-float-left
     float: left
     margin-right: 1rem
@@ -166,6 +169,9 @@
 .u-padding-medium
     padding: 1.8rem
 
+.u-padding-top
+    padding-top: 2rem
+
 .u-inline-block
     display: inline-block