diff --git a/admin/client/dist/styles/bundle.css b/admin/client/dist/styles/bundle.css
index 8936dd1f7..fda737482 100644
--- a/admin/client/dist/styles/bundle.css
+++ b/admin/client/dist/styles/bundle.css
@@ -9353,10 +9353,6 @@ body.cms{
   background:#f6f7f8;
 }
 
-.cms-content,.cms-content-fields,.cms-content-header,.cms-content-tools,.cms-menu,.cms-preview,.cms-preview-controls,.cms-preview iframe{
-  display:inline-block;
-}
-
 .cms-content-header{
   padding-left:1.5385rem;
   padding-right:1.5385rem;
@@ -10500,9 +10496,7 @@ form.member-profile-form #Permissions .optionset li{
 }
 
 .cms .cms-content{
-  border-radius:0;
   background:#f6f7f8;
-  z-index:40;
 }
 
 .cms .cms-content-fields{
@@ -15391,7 +15385,6 @@ div.grid-field__sort-field+.form__fieldgroup-item{
 }
 
 .toolbar--north{
-  display:block;
   background-image:none;
   background-color:#f0f2f4;
   border-bottom:1px solid #d9dee2;
@@ -15901,14 +15894,11 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
 }
 
 .cms-content__split--left-sm .cms-content__right{
-  position:relative;
   display:none;
 }
 
 .cms-content__split--left-sm .cms-content__left{
   width:100%;
-  position:absolute;
-  left:0;
 }
 
 .cms-content__split--left-sm .cms-content--selected{
@@ -15940,10 +15930,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
 }
 
 @media (min-width:992px){
-  .cms-content__split--left-sm{
-    padding-left:300px;
-  }
-
   .cms-content__split--left-sm .cms-content__left{
     width:300px;
   }
@@ -15959,10 +15945,6 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
 }
 
 @media (min-width:1200px){
-  .cms-content__split--left-sm{
-    padding-left:448px;
-  }
-
   .cms-content__split--left-sm .cms-content__left{
     width:448px;
   }
diff --git a/admin/client/src/components/Preview/Preview.js b/admin/client/src/components/Preview/Preview.js
index 1b8f60817..bff7a13d7 100644
--- a/admin/client/src/components/Preview/Preview.js
+++ b/admin/client/src/components/Preview/Preview.js
@@ -62,10 +62,10 @@ class Preview extends SilverStripeComponent {
 
     // Combine elements
     return (
-      <div className="cms-content__right preview">
+      <div className="flexbox-area-grow cms-content__right preview">
         {body}
         <a href="" className="cms-content__back-btn font-icon-left-open-big" />
-        <div className="toolbar--south">
+        <div className="toolbar toolbar--south">
           <div className="btn-toolbar">
             {toolbarButtons}
           </div>
diff --git a/admin/client/src/components/Toolbar/Toolbar.js b/admin/client/src/components/Toolbar/Toolbar.js
index 5527212b1..d27811df0 100644
--- a/admin/client/src/components/Toolbar/Toolbar.js
+++ b/admin/client/src/components/Toolbar/Toolbar.js
@@ -26,7 +26,7 @@ class Toolbar extends SilverStripeComponent {
     };
 
     return (
-      <div className="toolbar--north container-fluid">
+      <div className="toolbar toolbar--north">
         <div className="toolbar__navigation">
           {this.props.showBackButton &&
             <button {...backButtonProps}></button>
diff --git a/admin/client/src/components/Toolbar/Toolbar.scss b/admin/client/src/components/Toolbar/Toolbar.scss
index 166067a8a..ae1ab514c 100644
--- a/admin/client/src/components/Toolbar/Toolbar.scss
+++ b/admin/client/src/components/Toolbar/Toolbar.scss
@@ -15,7 +15,7 @@
 
 // Northern bar containing breadcrumb, tabs etc.
 .toolbar--north {
-  display: block;
+  // display: block;
   background-image: none;
   background-color: $background-darker;
   border-bottom: 1px solid $border-color;
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
index 14c8a87ad..1a1294daf 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
@@ -126,21 +126,19 @@ class CampaignAdmin extends SilverStripeComponent {
     };
 
     return (
-      <div className="cms-content__inner no-preview">
-        <div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
-          <Toolbar>
-            <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
-          </Toolbar>
-          <div className="panel--padded panel--scrollable panel--single-toolbar">
-            <div className="toolbar--content">
-              <div className="btn-toolbar">
-                <FormAction {...formActionProps} />
-              </div>
-            </div>
-            <div className="campaign-admin">
-              <FormBuilder {...formBuilderProps} />
+      <div className="fill-height cms-campaigns" aria-expanded="true">
+        <Toolbar>
+          <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
+        </Toolbar>
+        <div className="panel panel--padded panel--scrollable flexbox-area-grow">
+          <div className="toolbar toolbar--content">
+            <div className="btn-toolbar">
+              <FormAction {...formActionProps} />
             </div>
           </div>
+          <div className="campaign-admin">
+            <FormBuilder {...formBuilderProps} />
+          </div>
         </div>
       </div>
     );
@@ -180,15 +178,13 @@ class CampaignAdmin extends SilverStripeComponent {
     };
 
     return (
-      <div className="cms-content__inner">
+      <div>
         <Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
           <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
         </Toolbar>
 
-        <div className="panel panel--padded panel--scrollable panel--single-toolbar">
-          <div className="form--inline">
-            <FormBuilder {...formBuilderProps} />
-          </div>
+        <div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
+          <FormBuilder {...formBuilderProps} />
         </div>
       </div>
     );
@@ -209,14 +205,12 @@ class CampaignAdmin extends SilverStripeComponent {
     };
 
     return (
-      <div className="cms-content__inner">
+      <div>
         <Toolbar showBackButton handleBackButtonClick={this.handleBackButtonClick}>
           <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
         </Toolbar>
-        <div className="panel panel--padded panel--scrollable panel--single-toolbar">
-          <div className="form--inline">
-            <FormBuilder {...formBuilderProps} />
-          </div>
+        <div className="panel panel--padded panel--scrollable flexbox-area-grow form--inline">
+          <FormBuilder {...formBuilderProps} />
         </div>
       </div>
     );
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
index 9a90df7ea..d2b82ac45 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
@@ -146,19 +146,19 @@ class CampaignAdminList extends SilverStripeComponent {
         </div>
       );
     const bodyClass = [
-      'panel', 'panel--padded', 'panel--scrollable', 'panel--double-toolbar', 'campaign-items',
+      'panel', 'panel--padded', 'panel--scrollable', 'flexbox-area-grow', 'campaign-items',
     ];
 
     return (
-      <div className="cms-content__split cms-content__split--left-sm">
-        <div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
+      <div className="fill-width cms-content__split--left-sm">
+        <div className="fill-height cms-content__left cms-campaigns" aria-expanded="true">
           <Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
             <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
           </Toolbar>
           <div className={bodyClass.join(' ')}>
             {body}
           </div>
-          <div className="toolbar--south">
+          <div className="toolbar toolbar--south">
             {this.renderButtonToolbar()}
           </div>
         </div>
diff --git a/admin/client/src/styles/_layout.scss b/admin/client/src/styles/_layout.scss
index 69949d0a6..fba68b040 100644
--- a/admin/client/src/styles/_layout.scss
+++ b/admin/client/src/styles/_layout.scss
@@ -18,14 +18,13 @@
 
 .cms-content__split--left-sm {
   .cms-content__right {
-    position: relative;
     display: none;
   }
 
   .cms-content__left {
     width: 100%;
-    position: absolute;
-    left: 0;
+    // position: absolute;
+    // left: 0;
   }
 
   // Overlay preview if there isn't enough space for both items and preview
@@ -59,7 +58,7 @@
   }
 
   @include media-breakpoint-up(lg) {
-    padding-left: $cms-panel-sm;
+    // padding-left: $cms-panel-sm;
 
     .cms-content__left {
       width: $cms-panel-sm;
@@ -76,7 +75,7 @@
   }
 
   @include media-breakpoint-up(xl) {
-    padding-left: $cms-panel-md;
+    // padding-left: $cms-panel-md;
 
     .cms-content__left {
       width: $cms-panel-md;
diff --git a/admin/client/src/styles/legacy/_style.scss b/admin/client/src/styles/legacy/_style.scss
index d60f9088a..7f21b5ed7 100644
--- a/admin/client/src/styles/legacy/_style.scss
+++ b/admin/client/src/styles/legacy/_style.scss
@@ -49,20 +49,20 @@ body.cms {
   background: $tab-panel-texture-color;
 }
 
-.cms-preview,
-.cms-menu,
-.cms-content,
-.cms-content-header,
-// DEPRECATED:
-// .cms-content-tools will be removed in 4.0
-// Use .cms-content-filters instead (TODO rename to BEM).
-.cms-content-tools,
-.cms-content-fields,
-.cms-preview,
-.cms-preview iframe,
-.cms-preview-controls {
-  display: inline-block;
-}
+// .cms-preview,
+// .cms-menu,
+// .cms-content,
+// .cms-content-header,
+// // DEPRECATED:
+// // .cms-content-tools will be removed in 4.0
+// // Use .cms-content-filters instead (TODO rename to BEM).
+// .cms-content-tools,
+// .cms-content-fields,
+// .cms-preview,
+// .cms-preview iframe,
+// .cms-preview-controls {
+//   display: inline-block;
+// }
 
 .cms-content-header { // Todo: should add .container-fluid to markup or extend .container-fluid
   padding-left: $panel-padding-x;
@@ -1397,9 +1397,7 @@ form.member-profile-form {
 
 .cms {
   .cms-content {
-    border-radius: 0;
     background: $tab-panel-texture-color;
-    z-index: 40;
   }
 
   .cms-content-fields {
diff --git a/admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss b/admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss
index a6b8bf9ed..5e8f024f7 100644
--- a/admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss
+++ b/admin/templates/SilverStripe/Admin/Includes/CampaignAdmin_Content.ss
@@ -1,2 +1,2 @@
-<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
+<div class="cms-content flexbox-area-grow $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
 </div>