diff --git a/addons/im_livechat/static/src/scss/im_livechat_form.scss b/addons/im_livechat/static/src/scss/im_livechat_form.scss
index 808e5ba8322..8c319f9417d 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_form.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_form.scss
@@ -6,11 +6,6 @@
     }
 }
 
-.o_livechat_layout_colors {
-    vertical-align: middle;
-    align-items: center;
-}
-
 .o_form_view .o_group {
     // long selector in order to be more specific...
     .o_im_livechat_field_widget_color {
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 6a4d424bbf9..8e03624aa3d 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -127,7 +127,7 @@
                                     <group string="Livechat Button">
                                         <field name="button_text"/>
                                         <label for="button_background_color" string="Livechat Button Color" />
-                                        <div class="o_livechat_layout_colors">
+                                        <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
                                             <field name="button_background_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
                                             <field name="button_text_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
                                             <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_button_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
@@ -139,9 +139,9 @@
                                         <field name="default_message" placeholder="e.g. Hello, how may I help you?"/>
                                         <field name="input_placeholder"/>
                                         <label for="header_background_color" string="Channel Header Color" />
-                                        <div class="o_livechat_layout_colors">
-                                            <field name="header_background_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
-                                            <field name="title_color" widget="color" class="mb-4 o_im_livechat_field_widget_color"/>
+                                        <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
+                                            <field name="header_background_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
+                                            <field name="title_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
                                             <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_chat_window_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
                                                 <span class="fa fa-refresh mb-4"/>
                                             </button>