diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index e6ee5561e8..820baf4095 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -368,4 +368,9 @@ body {
     label {
         display: block;
     }
+}
+
+.color-btn-wrap {
+    display: flex;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/template/ParagraphSettings.template b/apps/documenteditor/main/app/template/ParagraphSettings.template
index e778772e54..aa04ed2c5f 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettings.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettings.template
@@ -72,8 +72,10 @@
     </tr>
     <tr class="text-only">
         <td class="padding-small" colspan=2>
-            <div id="paragraph-color-btn" style="display: inline-block;"></div>
-            <label class="input-label margin"><%= scope.textBackColor %></label>
+            <div class="color-btn-wrap">
+                <div id="paragraph-color-btn" style="display: inline-block;"></div>
+                <label class="input-label margin"><%= scope.textBackColor %></label>
+            </div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/TableSettings.template b/apps/documenteditor/main/app/template/TableSettings.template
index 46a015fec6..8d055da0c4 100644
--- a/apps/documenteditor/main/app/template/TableSettings.template
+++ b/apps/documenteditor/main/app/template/TableSettings.template
@@ -54,7 +54,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <div id="table-combo-border-size"></div>
-            <div class="table-color">
+            <div class="table-color color-btn-wrap">
                 <label class="input-label"><%= scope.textBorderColor %></label>
                 <div id="table-border-color-btn"></div>
             </div>
@@ -85,8 +85,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label margin"><%= scope.textBackColor %></label>
-            <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
+            <div class="color-btn-wrap">
+                <label class="input-label margin"><%= scope.textBackColor %></label>
+                <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
+            </div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 5f5c893f5e..cd8d8a9e05 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -48,7 +48,6 @@
         }
 
         .table-color {
-            display: inline-block;
             float: right;
             vertical-align: middle;
 
diff --git a/apps/presentationeditor/main/app/template/TableSettings.template b/apps/presentationeditor/main/app/template/TableSettings.template
index 33f3ae6900..ef4615c6cc 100644
--- a/apps/presentationeditor/main/app/template/TableSettings.template
+++ b/apps/presentationeditor/main/app/template/TableSettings.template
@@ -54,7 +54,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div class="border-color">
+            <div class="border-color color-btn-wrap">
                 <label class="input-label color-label"><%= scope.textBorderColor %></label>
                 <div id="table-border-color-btn" style="display: inline-block;"></div>
             </div>
@@ -85,8 +85,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label color-label"><%= scope.textBackColor %></label>
-            <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
+            <div class="color-btn-wrap">
+                <label class="input-label color-label"><%= scope.textBackColor %></label>
+                <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
+            </div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 59b4494a98..041e4953ff 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -213,7 +213,6 @@
         }
 
         .border-color {
-            display: inline-block;
             float: right;
             vertical-align: middle;
 
diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template
index 644612f689..44baa3634a 100644
--- a/apps/spreadsheeteditor/main/app/template/CellSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template
@@ -73,7 +73,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <div id="cell-combo-border-type"></div>
-            <div class="border-color">
+            <div class="border-color color-btn-wrap">
                 <label class="input-label"><%= scope.textBorderColor %></label>
                 <div id="cell-border-color-btn"></div>
             </div>
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index fef46ba6ef..71583b3255 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -15,7 +15,6 @@
         }
 
         .border-color {
-            display: inline-block;
             float: right;
             vertical-align: middle;