diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index e955e78559..fe94aa2bb8 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -89,12 +89,12 @@
 </div>
 <div id="id-adv-paragraph-borders" class="settings-panel">
     <div class="inner-content">
-        <div style="width: 100%;" class="padding-small">
+        <div class="settings-wrap padding-small">
             <label class="input-label"><%= scope.textBorderWidth %></label>
-            <div id="paragraphadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div class="border-color" style="display: inline-block; vertical-align: middle;">
+            <div id="paragraphadv-combo-border-size"></div>
+            <div class="border-color">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
-                <div id="paragraphadv-border-color-btn" style="display: inline-block;"></div>
+                <div id="paragraphadv-border-color-btn"></div>
             </div>
         </div>
         <label class="input-label padding-small" style="width: 100%;"><%= scope.textBorderDesc %></label>
@@ -111,9 +111,9 @@
                 <div id="paragraphadv-button-border-none" style="display: inline-block;"></div>
             </div>
         </div>
-        <div style="width: 100%;" class="padding-small">
+        <div class="color-btn-wrap" class="padding-small">
             <label class="input-label back-color"><%= scope.textBackColor %></label>
-            <div id="paragraphadv-back-color-btn" style="display: inline-block;"></div>
+            <div id="paragraphadv-back-color-btn"></div>
         </div>
     </div>
 </div>
diff --git a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
index 1b1c8edc4e..d8d9670f87 100644
--- a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
@@ -197,12 +197,12 @@
 </div>
 <div id="id-adv-table-borders" class="settings-panel">
     <div class="inner-content padding-large">
-        <div style="width: 100%;">
+        <div class="settings-wrap">
             <label class="input-label"><%= scope.textBorderWidth %></label>
-            <div id="tableadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div class="border-color" style="display: inline-block; vertical-align: middle;">
+            <div id="tableadv-combo-border-size"></div>
+            <div class="border-color">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
-                <div id="tableadv-border-color-btn" style="display: inline-block;"></div>
+                <div id="tableadv-border-color-btn"></div>
             </div>
         </div>
     </div>
@@ -231,13 +231,13 @@
             </div>
         </div>
         <div style="width: 100%;">
-            <div id="tableadv-panel-cell-back" style="display: inline-block;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
-                <div id="tableadv-button-back-color" style="display: inline-block;"></div>
+            <div id="tableadv-panel-cell-back">
+                <label class="input-label back-color"><%= scope.textBackColor %></label>
+                <div id="tableadv-button-back-color"></div>
             </div>
-            <div id="tableadv-panel-table-back" style="display: inline-block;">
+            <div id="tableadv-panel-table-back">
                 <label class="input-label back-color"><%= scope.textTableBackColor %></label>
-                <div id="tableadv-button-table-back-color" style="display: inline-block;"></div>
+                <div id="tableadv-button-table-back-color"></div>
             </div>
         </div>
     </div>
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 61f20633cb..eebece6bbd 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -2123,8 +2123,8 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
         ShowHideSpacing: function(spacing) {
             this.BordersContainer.toggleClass('settings-hidden', spacing);
             this.BordersSpacingContainer.toggleClass('settings-hidden', !spacing);
-            this.TableBackContainer.css('display', (!spacing && !this._allTable) ? 'none' : 'inline-block');
-            this.CellBackContainer.css('display', (!spacing && this._allTable) ? 'none' : 'inline-block');
+            this.TableBackContainer.css('display', (!spacing && !this._allTable) ? 'none' : 'flex');
+            this.CellBackContainer.css('display', (!spacing && this._allTable) ? 'none' : 'flex');
             this.TableBackContainer.css('float', (!spacing && this._allTable) ? 'none' : 'right');
             (spacing) ? this._UpdateBordersSpacing_() : this._UpdateBordersNoSpacing_();
         },
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 15a77b1bb6..279e7a389f 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -88,7 +88,29 @@
 }
 
 #id-adv-paragraph-borders {
+    .settings-wrap {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    #paragraphadv-combo-border-size {
+        width: 93px;
+    }
+
+    #paragraphadv-border-color-btn,
+    #paragraphadv-combo-border-size {
+        margin-left: 3px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 3px;
+        }
+    }
+
     .border-color {
+        display: flex;
+        align-items: center;
         padding-left: 20px;
 
         .rtl & {
@@ -200,11 +222,34 @@
 }
 
 #id-adv-table-borders {
-    .border-color {
-        float: right;
+    .settings-wrap {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    #tableadv-combo-border-size {
+        width: 93px;
+    }
+
+    #tableadv-border-color-btn,
+    #tableadv-combo-border-size {
+        margin-left: 3px;
 
         .rtl & {
-            float: left;
+            margin-left: 0;
+            margin-right: 3px;
+        }
+    }
+
+    .border-color {
+        padding-left: 20px;
+        display: flex;
+        align-items: center;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 20px;
         }
     }
 
@@ -235,6 +280,12 @@
             margin-left: 5px;
         }
     }
+
+    #tableadv-panel-cell-back,
+    #tableadv-panel-table-back {
+        display: flex;
+        align-items: center;
+    }
 }
 
 #id-adv-table-wrap {
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
index a2b2768107..befc43effd 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
@@ -12,13 +12,13 @@
             <div id="sliceradv-btn-style" style="width: 100%;height: 52px;"></div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSize %></label></div>
-        <div>
-            <div class="padding-large margin-right" style="display: inline-block;">
+        <div class="padding-large">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strWidth %></label>
                 <div id="sliceradv-spin-width"></div>
             </div>
-            <div id="sliceradv-button-ratio" class="margin-right" style="display: inline-block;"></div>
-            <div class="padding-large" style="display: inline-block;">
+            <div id="sliceradv-button-ratio" class="margin-right"></div>
+            <div style="display: inline-block;">
                 <label class="input-label"><%= scope.strHeight %></label>
                 <div id="sliceradv-spin-height"></div>
             </div>
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 3a24612faa..5b46afab03 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -360,6 +360,11 @@
             margin-left: 5px;
         }
     }
+
+    #sliceradv-button-ratio {
+        display: inline-block;
+        vertical-align: bottom;
+    }
 }
 
 #window-chart-data {