--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1163,16 +1163,17 @@ body #output-container {
   overflow: hidden;
 }
 
 .webconsole-output-wrapper {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   height: 100%;
+  width: 100vw;
 }
 
 /* Object Inspector */
 .webconsole-output-wrapper .object-inspector.tree {
   /*
    * Make the arrow the same color and approximately the same size of the twisty icon.
    * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
    */
@@ -1188,11 +1189,15 @@ body #output-container {
 .theme-dark .webconsole-output-wrapper .object-inspector.tree {
   --arrow-fill-color: #7F7E81;
 }
 
 .sidebar {
   display: flex;
   grid-row: 1 / -1;
   grid-column: -1 / -2;
-  min-width: 200px;
   background-color: var(--theme-sidebar-background);
 }
+
+.split-box.vert.sidebar {
+  /* Set to prevent the sidebar from extending past the right edge of the page */
+  width: unset;
+}
\ No newline at end of file

--- a/devtools/client/webconsole/new-console-output/components/SideBar.js
+++ b/devtools/client/webconsole/new-console-output/components/SideBar.js
@@ -1,35 +1,41 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const { Component } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class SideBar extends Component {
   static get propTypes() {
     return {
       sidebarVisible: PropTypes.bool
     };
   }
 
   render() {
     let {
       sidebarVisible,
     } = this.props;
 
     return (
       sidebarVisible ?
-        dom.aside({
+        SplitBox({
           className: "sidebar",
-        }, "Sidebar WIP")
+          endPanel: dom.aside({}, "Sidebar WIP"),
+          endPanelControl: true,
+          initialSize: "200px",
+          minSize: "100px",
+          vert: true,
+        })
         : null
     );
   }
 }
 
 function mapStateToProps(state, props) {
   return {
     sidebarVisible: state.ui.sidebarVisible,

--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -186,28 +186,28 @@ NewConsoleOutputWrapper.prototype = {
 
       let filterBar = FilterBar({
         serviceContainer: {
           attachRefToHud
         }
       });
 
       let sideBar = SideBar({
-        serviceContainer
+        serviceContainer,
       });
 
       let provider = createElement(
         Provider,
         { store },
         dom.div(
           {className: "webconsole-output-wrapper"},
+          consoleOutput,
           filterBar,
-          consoleOutput,
           sideBar
-      ));
+        ));
       this.body = ReactDOM.render(provider, this.parentNode);
 
       this.jsterm.focus();
     });
   },
 
   dispatchMessageAdd: function (message, waitForResponse) {
     // Wait for the message to render to resolve with the DOM node.