--- a/playground/index.html	Sat Feb 08 21:24:45 2014 -0500
+++ b/playground/index.html	Sun Feb 09 13:47:14 2014 -0500
@@ -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	Sat Feb 08 21:24:45 2014 -0500
+++ b/playground/playground.css	Sun Feb 09 13:47:14 2014 -0500
@@ -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	Sat Feb 08 21:24:45 2014 -0500
+++ b/playground/playground.js	Sun Feb 09 13:47:14 2014 -0500
@@ -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();
@@ -240,7 +242,6 @@
         CodeMirror.commands.at_autocomplete(editor, evt);
       }
     });
-    playground.makeResizer(this.parentNode, editor);
   };
   
   playground.init.output = function() {      
@@ -253,27 +254,28 @@
           : "application/ld+json",
         theme: playground.theme
       });
-    playground.makeResizer(this.parentNode, output);
   };
   
   /**
-   * Make a CodeMirror editor resizeable.
+   * Make one or more CodeMirror editor resizeable.
    *
    * @param parent the dom element to which the button should be attached
-   * @param target the CodeMirror instance which should become resizeble
+   * @param target the CodeMirror instances to be resized
    */
-  playground.makeResizer = function(parent, target){
+  playground.makeResizer = function(parent, targets){
+    targets = $.map(targets, function(val, key){ return val; });
     var start_y,
       start_height,
       handlers = {},
-      btn = $("<button/>", {"class": "btn btn-mini pull-right"})
-        .css({"width": "100%", "border-radius": "0"})
+      btn = $("<button/>", {"class": "btn resizer"})
         .mousedown(handlers.mousedown = function(evt){
           start_y = evt.screenY;
-          start_height = target.display.wrapper.clientHeight;
+          start_height = targets[0].display.wrapper.clientHeight;
           $(window)
             .bind("mousemove.resizer", function(evt){
-              target.setSize(null, start_height - (start_y - evt.screenY));
+             targets.map(function(tgt){
+                tgt.setSize(null, start_height - (start_y - evt.screenY));
+              });
             })
             .bind("mouseup.resizer", function(){
               $(window).unbind(".resizer");