diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
index 25f4d3f47..b128b52ba 100644
--- a/website/pages/playground/index.html
+++ b/website/pages/playground/index.html
@@ -112,6 +112,7 @@
     .editors-container {
       display: flex;
       flex: 1;
+      min-height: 0;
     }
 
     .editors {
@@ -163,17 +164,14 @@
     }
 
     .bottom-bar-buttons {
-      position: absolute;
       z-index: 10;
-      top: 0;
-      left: 0;
       padding: 8px;
       display: flex;
+      float: left;
     }
 
     .bottom-bar-buttons-right {
-      left: auto;
-      right: 0;
+      float: right;
     }
 
     .bottom-bar-buttons > * + * {
@@ -192,47 +190,51 @@
       }
     }
 
-    .options-details {
-      padding: 8px 0;
-    }
-
-    .options-summary {
-      font-size: 1.4em;
-      text-align: center;
-    }
-
     .options-container {
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: space-around;
+      display: none;
+      box-sizing: border-box;
+      width: 225px;
+      height: 100%;
+      border-bottom: 1px solid #ddd;
+      flex: 0 1 auto;
+    }
+
+    .options-container.open {
+      display: block;
     }
 
     .options {
-      flex-flow: column wrap;
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      overflow: auto;
+    }
+
+    .sub-options {
       flex: 1;
       display: flex;
-      justify-content: space-around;
-      padding: 0 10px;
-      margin: 5px;
-      margin-bottom: 0;
-      min-width: 150px;
+      padding: 15px 0 10px;
+      border-bottom: 1px solid #ddd;
+    }
+
+    .sub-options:last-child {
+      border: 0;
+    }
+
+    .sub-options > summary {
+      font-size: 14px;
+      font-weight: bold;
+      padding-bottom: 5px;
+    }
+
+    .sub-options > * {
+      margin-left: 10px;
     }
 
     label {
       font-family: "Consolas", "Courier New", Courier, monospace;
-      margin: 0 10px;
-    }
-
-    @media (max-width: 408px) {
-      label {
-        padding: 8px;
-      }
-      .options-container {
-        flex-direction: column-reverse;
-      }
-      .options.last {
-        flex-direction: column-reverse;
-      }
+      margin: 10px 0;
+      display: block;
     }
 
     input[type="number"] {
@@ -318,6 +320,76 @@
   </header>
 
   <div class="editors-container">
+    <div id="options-details" class="options-container">
+      <div class="options">
+        <details class="sub-options" open>
+          <summary>Global</summary>
+
+          <label>--parser
+            <select id="parser">
+              <option value="babylon">babylon</option>
+              <option value="flow">flow</option>
+              <option value="typescript">typescript</option>
+              <option value="css">css</option>
+              <option value="less">less</option>
+              <option value="scss">scss</option>
+              <option value="json">json</option>
+              <option value="graphql">graphql</option>
+              <option value="markdown">markdown</option>
+            </select>
+          </label>
+          <label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
+          <label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
+          <label><input type="checkbox" id="useTabs"> --use-tabs</label>
+        </details>
+        <details class="sub-options" open>
+          <summary>JavaScript</summary>
+
+          <label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
+          <label><input type="checkbox" id="singleQuote"> --single-quote</label>
+          <label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
+          <label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
+          <label>--arrow-parens
+            <select id="arrowParens">
+              <option value="avoid">avoid</option>
+              <option value="always">always</option>
+            </select>
+          </label>
+          <label>--trailing-comma
+            <select id="trailingComma">
+              <option value="none">none</option>
+              <option value="es5">es5</option>
+              <option value="all">all</option>
+            </select>
+          </label>
+        </details>
+        <details class="sub-options">
+          <summary>Markdown</summary>
+
+          <label>--prose-wrap
+            <select id="proseWrap">
+              <option value="preserve">preserve</option>
+              <option value="always">always</option>
+              <option value="never">never</option>
+            </select>
+          </label>
+        </details>
+        <details class="sub-options">
+          <summary>Special</summary>
+
+          <label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
+          <label><input type="checkbox" id="requirePragma"> --require-pragma</label>
+        </details>
+        <details class="sub-options">
+          <summary>Debug</summary>
+
+          <label><input type="checkbox" id="ast"> show AST</label>
+          <label><input type="checkbox" id="doc"> show doc</label>
+          <label><input type="checkbox" id="output2"> show second format</label>
+        </details>
+      </div>
+    </div>
+
     <div class="editors">
       <div class="editor loading input">
         <textarea id="input-editor"></textarea>
@@ -339,70 +411,14 @@
 
   <div class="bottom-bar">
     <div class="bottom-bar-buttons">
+      <button type="button" class="btn" id="button-options">
+        Show options
+      </button>
       <button type="button" class="btn" id="button-clear">
         Clear
       </button>
     </div>
 
-    <details class="options-details">
-      <summary class="options-summary">Options</summary>
-
-      <div class="options-container">
-        <div class="options">
-          <label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
-          <label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
-          <label>--prose-wrap
-            <select id="proseWrap">
-              <option value="preserve">preserve</option>
-              <option value="always">always</option>
-              <option value="never">never</option>
-            </select>
-          </label>
-          <label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
-          <label><input type="checkbox" id="requirePragma"> --require-pragma</label>
-        </div>
-        <div class="options">
-          <label><input type="checkbox" id="useTabs"> --use-tabs</label>
-          <label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
-          <label><input type="checkbox" id="singleQuote"> --single-quote</label>
-          <label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
-          <label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
-        </div>
-        <div class="options last">
-          <label>--arrow-parens
-            <select id="arrowParens">
-              <option value="avoid">avoid</option>
-              <option value="always">always</option>
-            </select>
-          </label>
-          <label>--trailing-comma
-            <select id="trailingComma">
-              <option value="none">none</option>
-              <option value="es5">es5</option>
-              <option value="all">all</option>
-            </select>
-          </label>
-          <label>--parser
-            <select id="parser">
-              <option value="babylon">babylon</option>
-              <option value="flow">flow</option>
-              <option value="typescript">typescript</option>
-              <option value="css">css</option>
-              <option value="less">less</option>
-              <option value="scss">scss</option>
-              <option value="json">json</option>
-              <option value="graphql">graphql</option>
-              <option value="markdown">markdown</option>
-            </select>
-          </label>
-          <span style="flex: 0.3"></span>
-          <label><input type="checkbox" id="ast"> show AST (debug)</label>
-          <label><input type="checkbox" id="doc"> show doc (debug)</label>
-          <label><input type="checkbox" id="output2"> show second format (debug)</label>
-        </div>
-      </div>
-    </details>
-
     <div class="bottom-bar-buttons bottom-bar-buttons-right">
       <button type="button" class="btn" id="button-copy-link">
         Copy link
diff --git a/website/static/playground.js b/website/static/playground.js
index 3460c1f37..c47e3f094 100644
--- a/website/static/playground.js
+++ b/website/static/playground.js
@@ -161,6 +161,18 @@ window.onload = function() {
     inputEditor.setValue("");
   };
 
+  var optionsElement = document.getElementById("options-details");
+  document.getElementById("button-options").onclick = function() {
+    var classes = optionsElement.classList;
+    if (classes.contains("open")) {
+      classes.remove("open");
+      this.innerHTML = "Show options";
+    } else {
+      classes.add("open");
+      this.innerHTML = "Hide options";
+    }
+  };
+
   var clipboard = new Clipboard("#button-copy-link, #button-copy-markdown", {
     text: function(trigger) {
       switch (trigger.id) {