diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 8b40975f6..874d9d783 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -583,7 +583,6 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
 .layout > .layout-row > .layout-cell.min-height{height:0}
 .layout > .layout-row > .layout-cell.center{text-align:center}
 .layout > .layout-row > .layout-cell.middle{vertical-align:middle}
-.layout > .layout-row > .layout-cell.width-fix > form,.layout > .layout-row > .layout-cell.width-fix > div{display:inline-block}
 .layout > .layout-row > .layout-cell.width-100{width:100px}
 .layout > .layout-row > .layout-cell.width-120{width:120px}
 .layout > .layout-row > .layout-cell.width-200{width:200px}
@@ -596,7 +595,6 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
 .layout > .layout-row > .layout-cell.min-height{height:0}
 .layout > .layout-row > .layout-cell.center{text-align:center}
 .layout > .layout-row > .layout-cell.middle{vertical-align:middle}
-.layout > .layout-row > .layout-cell.width-fix > form,.layout > .layout-row > .layout-cell.width-fix > div{display:inline-block}
 .layout > .layout-row.min-size{height:0}
 .layout > .layout-cell{display:table-cell;vertical-align:top;height:100%}
 .layout > .layout-cell.width-100{width:100px}
@@ -611,8 +609,8 @@ body{webkit-font-smoothing:antialiased;font-family:'Open Sans',Arial,sans-serif;
 .layout > .layout-cell.min-height{height:0}
 .layout > .layout-cell.center{text-align:center}
 .layout > .layout-cell.middle{vertical-align:middle}
-.layout > .layout-cell.width-fix > form,.layout > .layout-cell.width-fix > div{display:inline-block}
 .whiteboard{background:white}
+.layout-cell.width-fix > form,[data-calculate-width] > form,.layout-cell.width-fix > div,[data-calculate-width] > div{display:inline-block}
 body.compact-container .layout.layout-container,body.compact-container .layout .layout-container{padding:0 !important}
 body.slim-container .layout.layout-container,body.slim-container .layout .layout-container{padding-left:0 !important;padding-right:0 !important}
 @media (max-width:768px){.layout .hide-on-small{display:none}
@@ -639,7 +637,7 @@ nav#layout-mainmenu.navbar ul li.account a{padding-right:20px;position:relative;
 nav#layout-mainmenu.navbar ul li.account img{width:25px;margin-right:7px;position:relative;top:-2px}
 nav#layout-mainmenu.navbar ul.nav{display:inline-block}
 nav#layout-mainmenu.navbar .menu-toggle{display:none}
-nav#layout-mainmenu.navbar .toolbar-item{margin-right:0}
+nav#layout-mainmenu.navbar .toolbar-item{padding-right:0}
 nav#layout-mainmenu.navbar .toolbar-item:before,nav#layout-mainmenu.navbar .toolbar-item:after{margin-top:0}
 nav#layout-mainmenu.navbar .toolbar-item:before{left:-12px}
 nav#layout-mainmenu.navbar .toolbar-item:after{right:-12px}
diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js
index a7eb638a5..5b1bf868d 100644
--- a/modules/backend/assets/js/october-min.js
+++ b/modules/backend/assets/js/october-min.js
@@ -884,7 +884,7 @@ return this}}(window.jQuery);(function($){$(window).load(function(){$('nav.navba
 navbar=$(this),nav=$('ul.nav',navbar)
 nav.verticalMenu($('a.menu-toggle',navbar))
 $('li.with-tooltip > a',navbar).tooltip({container:'body',placement:'bottom'})
-$('.layout-cell.width-fix',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll')
+$('[data-calculate-width]',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll')
 if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})})(jQuery);+function($){"use strict";if($.oc===undefined)
 $.oc={}
 var SideNav=function(element,options){this.options=options
@@ -1090,7 +1090,7 @@ if(this.pageTitleTemplate===undefined)
 this.pageTitleTemplate=$title.data('titleTemplate')
 $title.text(this.pageTitleTemplate.replace('%s',title))}
 OctoberLayout.prototype.updateLayout=function(title){var $children,$el,fixedWidth,margin
-$('.layout-cell.width-fix').each(function(){$children=$(this).children()
+$('.layout-cell.width-fix, [data-calculate-width]').each(function(){$children=$(this).children()
 if($children.length>0){fixedWidth=0
 $children.each(function(){$el=$(this)
 margin=$el.data('oc.layoutMargin')
diff --git a/modules/backend/assets/js/october.layout.js b/modules/backend/assets/js/october.layout.js
index 2c93cd896..2c2718193 100644
--- a/modules/backend/assets/js/october.layout.js
+++ b/modules/backend/assets/js/october.layout.js
@@ -15,7 +15,9 @@
     OctoberLayout.prototype.updateLayout = function(title) {
         var $children, $el, fixedWidth, margin
 
-        $('.layout-cell.width-fix').each(function(){
+        // The entire 'width-fix' class can probably be removed if year >= 2017
+        // After checking that it isn't being used anywhere -sg
+        $('.layout-cell.width-fix, [data-calculate-width]').each(function(){
             $children = $(this).children()
 
             if ($children.length > 0) {
diff --git a/modules/backend/assets/js/october.navbar.js b/modules/backend/assets/js/october.navbar.js
index e6e5fc768..df87b29c0 100644
--- a/modules/backend/assets/js/october.navbar.js
+++ b/modules/backend/assets/js/october.navbar.js
@@ -12,7 +12,7 @@
 (function($){
     $(window).load(function() {
         $('nav.navbar').each(function(){
-            var 
+            var
                 navbar = $(this),
                 nav = $('ul.nav', navbar)
 
@@ -23,7 +23,7 @@
                 placement: 'bottom'
             })
 
-            $('.layout-cell.width-fix', navbar).one('oc.widthFixed', function(){
+            $('[data-calculate-width]', navbar).one('oc.widthFixed', function() {
                 var dragScroll = $('[data-control=toolbar]', navbar).data('oc.dragScroll')
                 if (dragScroll) {
                     dragScroll.goToElement($('ul.nav > li.active', navbar), undefined, {'duration': 0})
diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less
index 23bdcf019..ad4b4a431 100644
--- a/modules/backend/assets/less/layout/layout.less
+++ b/modules/backend/assets/less/layout/layout.less
@@ -112,12 +112,6 @@ body {
         &.middle {
             vertical-align: middle;
         }
-
-        &.width-fix {
-            > form, > div {
-                display: inline-block;
-            }
-        }
     }
 
     display: table;
@@ -148,6 +142,16 @@ body {
     background: white;
 }
 
+//
+// Calculated fixed width
+//
+
+.layout-cell.width-fix, [data-calculate-width] {
+    > form, > div {
+        display: inline-block;
+    }
+}
+
 //
 // Layout styles
 //
diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less
index 8115f51f2..a687cd28d 100644
--- a/modules/backend/assets/less/layout/mainmenu.less
+++ b/modules/backend/assets/less/layout/mainmenu.less
@@ -7,8 +7,6 @@ body.mainmenu-open {
 }
 
 nav#layout-mainmenu.navbar {
-    // .clearfix();
-    // position: relative;
     background-color: @color-mainmenu;
     height: auto;
     padding: 0 0 0 20px;
@@ -84,7 +82,7 @@ nav#layout-mainmenu.navbar {
     .menu-toggle { display: none; }
 
     .toolbar-item {
-        margin-right: 0;
+        padding-right: 0;
 
         &:before, &:after { margin-top: 0; }
         &:before { left: -12px; }
diff --git a/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js b/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
index b1c657039..c4433e366 100644
--- a/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
+++ b/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
@@ -169,8 +169,8 @@
     MarkdownEditor.prototype.createToolbar = function() {
         var self = this,
             $button,
-            $buttons = $('<div class="layout-cell toolbar-item" />'),
-            $fixedButtons = $('<div class="layout-cell toolbar-item width-fix" />')
+            $buttons = $('<div class="toolbar-item toolbar-primary" />'),
+            $fixedButtons = $('<div class="toolbar-item" data-calculate-width />')
 
         $.each($.oc.markdownEditorButtons, function(code, button) {
             $button = self.makeToolbarButton(code, button)
diff --git a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
index 160198222..685284f35 100644
--- a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
+++ b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
@@ -1,4 +1,3 @@
-
 <?php if ($this->previewMode): ?>
     <div class="form-control"><?= e($value) ?></div>
 <?php else: ?>
@@ -10,8 +9,7 @@
         data-view-mode="<?= $mode ?>"
         data-vendor-path="<?= URL::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>">
 
-        <div class="layout control-toolbar editor-toolbar"></div>
-
+        <div class="control-toolbar editor-toolbar"></div>
 
         <div class="editor-write layout-cell">
             <textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>
diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm
index 216d7c960..35ae18eb8 100644
--- a/modules/backend/layouts/_mainmenu.htm
+++ b/modules/backend/layouts/_mainmenu.htm
@@ -2,28 +2,26 @@
     $activeItem = BackendMenu::getActiveMainMenuItem();
     $mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
 ?>
-<nav class="navbar layout control-toolbar" id="layout-mainmenu" role="navigation">
-    <div class="layout-cell">
-        <div class="toolbar-item">
-            <div data-control="toolbar">
-                <a class="menu-toggle" href="javascript:;">
-                    <i class="icon-bars"></i>
-                    <?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
-                </a>
+<nav class="navbar control-toolbar" id="layout-mainmenu" role="navigation">
+    <div class="toolbar-item toolbar-primary">
+        <div data-control="toolbar">
+            <a class="menu-toggle" href="javascript:;">
+                <i class="icon-bars"></i>
+                <?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
+            </a>
 
-                <ul class="nav">
-                    <?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
-                        <li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>">
-                            <a href="<?= $item->url ?>">
-                                <i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?>
-                            </a>
-                        </li>
-                    <?php endforeach ?>
-                </ul>
-            </div>
+            <ul class="nav">
+                <?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
+                    <li class="<?= BackendMenu::isMainMenuItemActive($item) ? 'active' : null ?>">
+                        <a href="<?= $item->url ?>">
+                            <i class="<?= $item->icon ?>"></i><?= e(trans($item->label)) ?>
+                        </a>
+                    </li>
+                <?php endforeach ?>
+            </ul>
         </div>
     </div>
-    <div class="layout-cell width-fix">
+    <div class="toolbar-item" data-calculate-width>
         <ul>
             <li class="icon preview with-tooltip">
                 <a
diff --git a/modules/backend/widgets/toolbar/partials/_toolbar.htm b/modules/backend/widgets/toolbar/partials/_toolbar.htm
index 4af785c8c..bf43b9d71 100644
--- a/modules/backend/widgets/toolbar/partials/_toolbar.htm
+++ b/modules/backend/widgets/toolbar/partials/_toolbar.htm
@@ -1,15 +1,17 @@
 <div class="toolbar-widget <?= $cssClasses ?>" id="<?= $this->getId() ?>">
-    <div class="layout control-toolbar">
+    <div class="control-toolbar">
+
         <!-- Control Panel -->
-        <div class="layout-cell toolbar-item">
+        <div class="toolbar-item toolbar-primary">
             <?= ($controlPanel) ?: '&nbsp;' ?>
         </div>
 
         <!-- List Search -->
         <?php if ($search): ?>
-            <div class="layout-cell toolbar-item width-fix">
+            <div class="toolbar-item" data-calculate-width>
                 <?= $search ?>
             </div>
         <?php endif ?>
+
     </div>
 </div>
\ No newline at end of file
diff --git a/modules/cms/widgets/assetlist/partials/_toolbar.htm b/modules/cms/widgets/assetlist/partials/_toolbar.htm
index ee8aaac5b..d197aea2a 100644
--- a/modules/cms/widgets/assetlist/partials/_toolbar.htm
+++ b/modules/cms/widgets/assetlist/partials/_toolbar.htm
@@ -1,74 +1,78 @@
 <div class="layout-row min-size">
-    <div class="layout control-toolbar">
-        <div class="layout-cell width-fix">
-            <div class="toolbar-item">
-                <div class="btn-group">
-                    <div class="dropdown last">
-                        <button type="button" class="btn btn-primary oc-icon-plus"
-                            data-control="create-asset"
-                            data-toggle="dropdown"
-                            ><?= e(trans('cms::lang.sidebar.add')) ?></button>
+    <div class="control-toolbar toolbar-padded">
 
-                        <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
-                            <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="create-template" class="oc-icon-file-text-o"><?= e(trans('cms::lang.asset.create_file')) ?></a></li>
-                            <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="upload-assets" class="oc-icon-upload"><?= e(trans('cms::lang.asset.upload_files')) ?></a></li>
-                            <li role="presentation" class="divider"></li>
-                            <li role="presentation"><a
-                                role="menuitem"
-                                tabindex="-1"
-                                href="javascript:;"
-                                class="oc-icon-folder-o"
-                                data-control="popup"
-                                data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
-                            ><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
-                        </ul>
-                    </div>
+        <!-- Control Panel -->
+        <div class="toolbar-item" data-calculate-width>
+            <div class="btn-group">
+                <div class="dropdown last">
+                    <button type="button" class="btn btn-primary oc-icon-plus"
+                        data-control="create-asset"
+                        data-toggle="dropdown"
+                        ><?= e(trans('cms::lang.sidebar.add')) ?></button>
 
-                    <div class="dropdown hide"
-                        id="<?= $this->getId('tools-button') ?>"
-                        data-trigger-action="show"
-                        data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
-                        data-trigger-condition="checked">
-                        <button type="button" class="btn btn-primary empty oc-icon-wrench last"
-                            data-toggle="dropdown"
-                            data-control="asset-tools"
-                            ></button>
+                    <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_add_title')) ?>">
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="create-template" class="oc-icon-file-text-o"><?= e(trans('cms::lang.asset.create_file')) ?></a></li>
+                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-control="upload-assets" class="oc-icon-upload"><?= e(trans('cms::lang.asset.upload_files')) ?></a></li>
+                        <li role="presentation" class="divider"></li>
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            class="oc-icon-folder-o"
+                            data-control="popup"
+                            data-handler="<?= $this->getEventHandler('onLoadNewDirPopup') ?>"
+                        ><?= e(trans('cms::lang.asset.create_directory')) ?></a></li>
+                    </ul>
+                </div>
 
-                        <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>">
-                            <li role="presentation"><a
-                                role="menuitem"
-                                tabindex="-1"
-                                href="javascript:;"
-                                data-control="delete-asset"
-                                data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
-                                class="oc-icon-trash-o"
-                            ><?= e(trans('cms::lang.asset.delete')) ?></a></li>
+                <div class="dropdown hide"
+                    id="<?= $this->getId('tools-button') ?>"
+                    data-trigger-action="show"
+                    data-trigger="<?= '#'.$this->getId('asset-list') ?> input[type=checkbox]"
+                    data-trigger-condition="checked">
+                    <button type="button" class="btn btn-primary empty oc-icon-wrench last"
+                        data-toggle="dropdown"
+                        data-control="asset-tools"
+                        ></button>
 
-                            <li role="presentation"><a
-                                role="menuitem"
-                                tabindex="-1"
-                                href="javascript:;"
-                                class="oc-icon-angle-double-right"
-                                data-control="popup"
-                                data-handler="<?= $this->getEventHandler('onLoadMovePopup') ?>"
-                            ><?= e(trans('cms::lang.asset.move')) ?></a></li>
-                        </ul>
-                    </div>
+                    <ul class="dropdown-menu" role="menu" data-dropdown-title="<?= e(trans('cms::lang.asset.drop_down_operation_title')) ?>">
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            data-control="delete-asset"
+                            data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
+                            class="oc-icon-trash-o"
+                        ><?= e(trans('cms::lang.asset.delete')) ?></a></li>
 
+                        <li role="presentation"><a
+                            role="menuitem"
+                            tabindex="-1"
+                            href="javascript:;"
+                            class="oc-icon-angle-double-right"
+                            data-control="popup"
+                            data-handler="<?= $this->getEventHandler('onLoadMovePopup') ?>"
+                        ><?= e(trans('cms::lang.asset.move')) ?></a></li>
+                    </ul>
                 </div>
             </div>
         </div>
-        <div class="layout-cell">
-            <div class="relative toolbar-item loading-indicator-container size-input-text">
-                <input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>"
-                    class="form-control icon search" autocomplete="off"
-                    data-track-input
-                    data-load-indicator
-                    data-load-indicator-opaque
-                    data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')"
-                    data-request="<?= $this->getEventHandler('onSearch') ?>"
-                />
-            </div>
+
+        <!-- Asset Search -->
+        <div class="relative toolbar-item loading-indicator-container size-input-text">
+            <input
+                type="text"
+                name="search"
+                value="<?= e($this->getSearchTerm()) ?>"
+                class="form-control icon search" autocomplete="off"
+                placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>"
+                data-track-input
+                data-load-indicator
+                data-load-indicator-opaque
+                data-request-success="$('<?= '#'.$this->getId('tools-button') ?>').trigger('oc.triggerOn.update')"
+                data-request="<?= $this->getEventHandler('onSearch') ?>"
+            />
         </div>
+
     </div>
 </div>
\ No newline at end of file
diff --git a/modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm b/modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm
index 1203cc141..58d02995b 100644
--- a/modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm
+++ b/modules/cms/widgets/mediamanager/partials/_crop-toolbar.htm
@@ -9,8 +9,8 @@
     $sizeDisabledAttr = $currentSelectionMode == Cms\Widgets\MediaManager::SELECTION_MODE_NORMAL ? 'disabled="disabled"' : null;
 ?>
 
-<div class="layout control-toolbar standalone-paddings">
-    <div class="layout-cell toolbar-item">
+<div class="control-toolbar toolbar-padded">
+    <div class="toolbar-item toolbar-primary">
         <div data-control="toolbar">
             <label class="standalone"><?= e(trans('cms::lang.media.image_size')) ?> <span data-label="width"><?= $dimensions[0] ?></span> x <span data-label="height"><?= $dimensions[1] ?></span></label>
 
diff --git a/modules/cms/widgets/mediamanager/partials/_toolbar.htm b/modules/cms/widgets/mediamanager/partials/_toolbar.htm
index 2d635badb..786215792 100644
--- a/modules/cms/widgets/mediamanager/partials/_toolbar.htm
+++ b/modules/cms/widgets/mediamanager/partials/_toolbar.htm
@@ -1,6 +1,6 @@
 <div class="layout-row min-size">
-    <div class="layout control-toolbar standalone-paddings">
-        <div class="layout-cell toolbar-item">
+    <div class="control-toolbar toolbar-padded">
+        <div class="toolbar-item toolbar-primary">
             <div data-control="toolbar">
                 <div class="btn-group offset-right">
                     <button type="button" class="btn btn-primary oc-icon-upload" data-control="upload"
@@ -22,10 +22,14 @@
                 </div>
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
+        <div class="toolbar-item" data-calculate-width>
             <div class="relative loading-indicator-container size-input-text">
-                <input placeholder="<?= e(trans('cms::lang.media.search')) ?>" type="text" name="search" value="<?= e($searchTerm) ?>" 
-                    class="form-control icon search growable" 
+                <input
+                    type="text"
+                    name="search"
+                    value="<?= e($searchTerm) ?>"
+                    class="form-control icon search growable"
+                    placeholder="<?= e(trans('cms::lang.media.search')) ?>"
                     data-control="search"
                     autocomplete="off"
                     data-load-indicator
diff --git a/modules/cms/widgets/templatelist/partials/_toolbar.htm b/modules/cms/widgets/templatelist/partials/_toolbar.htm
index 3baf9fe39..563c31227 100644
--- a/modules/cms/widgets/templatelist/partials/_toolbar.htm
+++ b/modules/cms/widgets/templatelist/partials/_toolbar.htm
@@ -1,32 +1,33 @@
 <div class="layout-row min-size">
-    <div class="layout control-toolbar">
-        <div class="layout-cell width-fix">
-            <div class="toolbar-item">
-                <div class="btn-group">
-                    <button type="button" class="btn btn-primary oc-icon-plus last"
-                        data-control="create-template"
-                        ><?= e(trans('cms::lang.sidebar.add')) ?></button>
-                    <button type="button" class="btn btn-primary empty oc-icon-trash-o hide"
-                        id="<?= $this->getId('delete-button') ?>"
-                        data-control="delete-template"
-                        data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
-                        data-trigger-action="show"
-                        data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]"
-                        data-trigger-condition="checked"></button>
-                </div>
+    <div class="control-toolbar toolbar-padded">
+
+        <!-- Control Panel -->
+        <div class="toolbar-item" data-calculate-width>
+            <div class="btn-group">
+                <button type="button" class="btn btn-primary oc-icon-plus last"
+                    data-control="create-template"
+                    ><?= e(trans('cms::lang.sidebar.add')) ?></button>
+                <button type="button" class="btn btn-primary empty oc-icon-trash-o hide"
+                    id="<?= $this->getId('delete-button') ?>"
+                    data-control="delete-template"
+                    data-confirmation="<?= e(trans($this->deleteConfirmation)) ?>"
+                    data-trigger-action="show"
+                    data-trigger="<?= '#'.$this->getId('template-list') ?> input[type=checkbox]"
+                    data-trigger-condition="checked"></button>
             </div>
         </div>
-        <div class="layout-cell">
-            <div class="relative toolbar-item loading-indicator-container size-input-text">
-                <input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>" 
-                    class="form-control icon search" autocomplete="off"
-                    data-track-input
-                    data-load-indicator
-                    data-load-indicator-opaque
-                    data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')"
-                    data-request="<?= $this->getEventHandler('onSearch') ?>" 
-                />
-            </div>
+
+        <!-- Template Search -->
+        <div class="relative toolbar-item loading-indicator-container size-input-text">
+            <input placeholder="<?= e(trans('cms::lang.sidebar.search')) ?>" type="text" name="search" value="<?= e($this->getSearchTerm()) ?>" 
+                class="form-control icon search" autocomplete="off"
+                data-track-input
+                data-load-indicator
+                data-load-indicator-opaque
+                data-request-success="$('<?= '#'.$this->getId('delete-button') ?>').trigger('oc.triggerOn.update')"
+                data-request="<?= $this->getEventHandler('onSearch') ?>"
+            />
         </div>
+
     </div>
 </div>
\ No newline at end of file
diff --git a/modules/system/assets/ui/docs/toolbar.md b/modules/system/assets/ui/docs/toolbar.md
index 0564b4e17..4dfc6248b 100644
--- a/modules/system/assets/ui/docs/toolbar.md
+++ b/modules/system/assets/ui/docs/toolbar.md
@@ -2,10 +2,12 @@
 
 A scrollable set of buttons aligned to the left with a fixed right section.
 
+All toolbar items (`toolbar-item`) should have a fixed width, except for the primary item (`toolbar-primary`) which will stretch. In the October backend you can use the `data-calculate-width` attribute to have these widths calculated dynamically for you.
+
 ## Basic toolbar
 
-    <div class="layout control-toolbar">
-        <div class="layout-cell toolbar-item">
+    <div class="control-toolbar">
+        <div class="toolbar-item toolbar-primary">
             <div data-control="toolbar">
                 <button type="button" class="btn btn-primary oc-icon-plus">Create post</button>
 
@@ -24,15 +26,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
                 <button type="button" class="btn btn-default oc-icon-hdd-o">Archive</button>
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
-            <input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
+        <div class="toolbar-item" style="width: 110px">
+            <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
         </div>
     </div>
 
 ### Button groups
 
-    <div class="layout control-toolbar">
-        <div class="layout-cell toolbar-item">
+    <div class="control-toolbar">
+        <div class="toolbar-item toolbar-primary">
             <div data-control="toolbar">
                 <div class="btn-group">
                     <button type="button" class="btn btn-default oc-icon-mail-reply-all">Send by email</button>
@@ -40,15 +42,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
                 </div>
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
-            <input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
+        <div class="toolbar-item" style="width: 110px">
+            <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
         </div>
     </div>
 
 ### Button with Tooltips
 
-    <div class="layout control-toolbar">
-        <div class="layout-cell toolbar-item">
+    <div class="control-toolbar">
+        <div class="toolbar-item toolbar-primary">
             <div data-control="toolbar">
                 <button
                     type="button"
@@ -61,15 +63,15 @@ A scrollable set of buttons aligned to the left with a fixed right section.
                 </button>
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
-            <input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
+        <div class="toolbar-item" style="width: 110px">
+            <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
         </div>
     </div>
 
 ### Dropdown buttons
 
-    <div class="layout control-toolbar">
-        <div class="layout-cell toolbar-item">
+    <div class="control-toolbar">
+        <div class="toolbar-item toolbar-primary">
             <div data-control="toolbar">
 
                 <div class="dropdown dropdown-fixed">
@@ -88,8 +90,8 @@ A scrollable set of buttons aligned to the left with a fixed right section.
 
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
-            <input placeholder="search..." type="text" name="" value="" class="form-control icon search growable" autocomplete="off"/>
+        <div class="toolbar-item" style="width: 110px">
+            <input placeholder="search..." type="text" name="" value="" class="form-control icon search" />
         </div>
     </div>
 
@@ -139,7 +141,7 @@ A scrollable set of buttons aligned to the left with a fixed right section.
                 <button type="button" class="btn tb-icon tb-horizontalrule"></button>
             </div>
         </div>
-        <div class="layout-cell toolbar-item width-fix">
+        <div class="toolbar-item" style="width: 80px">
             <button type="button" class="btn oc-icon-eye"></button>
             <button type="button" class="btn oc-icon-expand"></button>
         </div>
diff --git a/modules/system/assets/ui/less/toolbar.less b/modules/system/assets/ui/less/toolbar.less
index a2a886d5f..4ecd9b8a4 100644
--- a/modules/system/assets/ui/less/toolbar.less
+++ b/modules/system/assets/ui/less/toolbar.less
@@ -27,9 +27,9 @@
     position: relative;
     .horizontal-scroll-indicators(@color-scroll-indicator);
 
-    &.standalone-paddings {
-        padding: 20px;
-    }
+    display: table;
+    table-layout: fixed;
+    width: 100%;
 
     &:before {
         left: -10px;
@@ -41,27 +41,20 @@
 
     .toolbar-item {
         position: relative;
-
         white-space: nowrap;
-        margin-right: 20px;
+        display: table-cell;
+        vertical-align: top;
+        padding-right: 20px;
 
+        &:last-child,
         &.last {
-            margin-right: 0;
+            padding-right: 0;
         }
 
         .horizontal-scroll-indicators(@color-scroll-indicator);
 
         &:before { left: -10px; }
-
-        &.layout-cell {
-            padding-right: 20px;
-            margin-right: 0;
-            &:after { right: 6px; }
-
-            &:last-child {
-                padding-right: 0;
-            }
-        }
+        &:after { right: 6px; }
 
         .btn, .btn-group, .dropdown {
             white-space: nowrap;
@@ -101,6 +94,10 @@
         height: auto;
         padding: 8px 10px;
     }
+
+    &.toolbar-padded {
+        padding: 20px;
+    }
 }
 
 [data-control=toolbar] {
@@ -109,12 +106,6 @@
     overflow: hidden;
 }
 
-#layout-side-panel, .panel-contents {
-    .control-toolbar {
-        padding: 20px 0 20px 20px;
-    }
-}
-
 //
 // Editor toolbar
 // --------------------------------------------------
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 78b0eadcf..acd8155ea 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -1471,26 +1471,23 @@ ul.status-list li span.status.danger{background:#d9534f}
 ul.status-list li span.status.info{background:#5bc0de}
 .gecko ul.status-list li span.status.circle{top:-2px}
 .report-container ul.status-list{margin-top:-10px}
-.control-toolbar{font-size:0;padding:0 0 20px 0;position:relative}
+.control-toolbar{font-size:0;padding:0 0 20px 0;position:relative;display:table;table-layout:fixed;width:100%}
 .control-toolbar:after,.control-toolbar:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb}
 .control-toolbar:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"}
 .control-toolbar:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"}
 .control-toolbar.scroll-before:before{display:block}
 .control-toolbar.scroll-after:after{display:block}
-.control-toolbar.standalone-paddings{padding:20px}
 .control-toolbar:before{left:-10px}
 .control-toolbar:after{right:-8px}
-.control-toolbar .toolbar-item{position:relative;white-space:nowrap;margin-right:20px}
-.control-toolbar .toolbar-item.last{margin-right:0}
+.control-toolbar .toolbar-item{position:relative;white-space:nowrap;display:table-cell;vertical-align:top;padding-right:20px}
+.control-toolbar .toolbar-item:last-child,.control-toolbar .toolbar-item.last{padding-right:0}
 .control-toolbar .toolbar-item:after,.control-toolbar .toolbar-item:before{display:none;position:absolute;top:50%;margin-top:-7px;height:9px;font-size:10px;color:#bbbbbb}
 .control-toolbar .toolbar-item:before{left:-6px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f104"}
 .control-toolbar .toolbar-item:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"}
 .control-toolbar .toolbar-item.scroll-before:before{display:block}
 .control-toolbar .toolbar-item.scroll-after:after{display:block}
 .control-toolbar .toolbar-item:before{left:-10px}
-.control-toolbar .toolbar-item.layout-cell{padding-right:20px;margin-right:0}
-.control-toolbar .toolbar-item.layout-cell:after{right:6px}
-.control-toolbar .toolbar-item.layout-cell:last-child{padding-right:0}
+.control-toolbar .toolbar-item:after{right:6px}
 .control-toolbar .toolbar-item .btn,.control-toolbar .toolbar-item .btn-group,.control-toolbar .toolbar-item .dropdown{white-space:nowrap;float:none;display:inline-block;margin-right:10px}
 .control-toolbar .toolbar-item .btn:last-child,.control-toolbar .toolbar-item .btn-group:last-child,.control-toolbar .toolbar-item .dropdown:last-child{margin-right:0}
 .control-toolbar .toolbar-item .btn.standalone,.control-toolbar .toolbar-item .btn-group.standalone,.control-toolbar .toolbar-item .dropdown.standalone{margin-right:15px}
@@ -1498,8 +1495,8 @@ ul.status-list li span.status.info{background:#5bc0de}
 .control-toolbar .toolbar-item .btn-group .dropdown > .btn{margin-right:0;border-bottom-right-radius:0;border-top-right-radius:0}
 .control-toolbar .toolbar-item .btn-group .dropdown.last > .btn{border-bottom-right-radius:2px !important;border-top-right-radius:2px !important}
 .control-toolbar input.form-control[type=text]{height:auto;padding:8px 10px}
+.control-toolbar.toolbar-padded{padding:20px}
 [data-control=toolbar]{white-space:nowrap;width:100%;overflow:hidden}
-#layout-side-panel .control-toolbar,.panel-contents .control-toolbar{padding:20px 0 20px 20px}
 .control-toolbar.editor-toolbar{padding:0;background:#dddddd;border-bottom-right-radius:0;border-bottom-left-radius:0}
 .control-toolbar.editor-toolbar .toolbar-item .btn,.control-toolbar.editor-toolbar .toolbar-item .btn-group,.control-toolbar.editor-toolbar .toolbar-item .dropdown{margin:0;padding:0}
 .control-toolbar.editor-toolbar .toolbar-item .btn{text-align:center;height:40px;width:40px;line-height:40px;zoom:1;color:#404040;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}