--- a/playground/index.html	Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/index.html	Mon Feb 10 11:35:49 2014 +0100
@@ -184,7 +184,7 @@
       </div>
       <p id="processing-errors" class="text-error"></p>
       
-      <div>
+      <div id="output-container">
         <ul id="tabs" class="nav nav-tabs">
           <li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
           <li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>

--- a/playground/playground.css	Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/playground.css	Mon Feb 10 11:35:49 2014 +0100
@@ -1,2 +1,8 @@
 #frame-div{ display: none; }
-#tabs{ margin-bottom: 0; }
\ No newline at end of file
+#tabs{ margin-bottom: 0; }
+.btn.resizer{
+  cursor: row-resize;
+  padding: .5px;
+  width: 100%;
+  display: block;
+}
\ No newline at end of file

--- a/playground/playground.js	Thu Feb 06 16:08:51 2014 -0500
+++ b/playground/playground.js	Mon Feb 10 11:35:49 2014 +0100
@@ -194,6 +194,8 @@
     
     $(".codemirror-input").each(playground.init.editor);
     $(".codemirror-output").each(playground.init.output);
+    playground.makeResizer($("#markup-container"), playground.editors);
+    playground.makeResizer($("#output-container"), playground.outputs);
     
     if(window.location.search) {
       playground.processQueryParameters();
@@ -253,7 +255,36 @@
         theme: playground.theme
       });
   };
-
+  
+  /**
+   * Make one or more CodeMirror editor resizeable.
+   *
+   * @param parent the dom element to which the button should be attached
+   * @param target the CodeMirror instances to be resized
+   */
+  playground.makeResizer = function(parent, targets){
+    targets = $.map(targets, function(val, key){ return val; });
+    var start_y,
+      start_height,
+      handlers = {},
+      btn = $("<button/>", {"class": "btn resizer"})
+        .mousedown(handlers.mousedown = function(evt){
+          start_y = evt.screenY;
+          start_height = targets[0].display.wrapper.clientHeight;
+          $(window)
+            .bind("mousemove.resizer", function(evt){
+             targets.map(function(tgt){
+                tgt.setSize(null, start_height - (start_y - evt.screenY));
+              });
+            })
+            .bind("mouseup.resizer", function(){
+              $(window).unbind(".resizer");
+              btn.blur();
+            });
+        })
+        .appendTo(parent);
+  };
+  
   /**
    * Callback for when tabs are selected in the UI.
    *