diff --git a/addons/mail/views/res_config_settings_views.xml b/addons/mail/views/res_config_settings_views.xml
index 47127718979..0b425e27c42 100644
--- a/addons/mail/views/res_config_settings_views.xml
+++ b/addons/mail/views/res_config_settings_views.xml
@@ -53,34 +53,38 @@
                                         string="Outgoing Email Servers" icon="fa-arrow-right" class="btn-link"/>
                                     </div>
                                 </div>
-                                <div class="mt-3 d-flex" attrs="{'invisible': [('external_email_server_default', '=', False)]}">
-                                    <field name="module_google_gmail"/>
-                                    <div>
-                                        <label string="Gmail Credentials" for="module_google_gmail"/>
-                                        <a href="https://console.developers.google.com/" title="Get Gmail API credentials" class="o_doc_link" target="_blank"/>
-                                        <div class="text-muted">
-                                            Send and receive emails through your Gmail account.
-                                        </div>
-                                        <div class="content-group" attrs="{'invisible': [('module_google_gmail','=',False)]}" id="msg_module_google_gmail">
-                                            <div class="mt16 text-warning"><strong>Save</strong> this page and come back here to set up the feature.</div>
-                                        </div>
-                                    </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('external_email_server_default', '=', False)]}">
+                            <div class="o_setting_left_pane">
+                                <field name="module_google_gmail"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label string="Use a Gmail Server" for="module_google_gmail"/>
+                                <a href="https://console.developers.google.com/" title="Get Gmail API credentials" class="o_doc_link" target="_blank"/>
+                                <div class="text-muted">
+                                    Send and receive emails through your Gmail account.
                                 </div>
-                                <div class="mt-3 d-flex" attrs="{'invisible': [('external_email_server_default', '=', False)]}">
-                                    <field name="module_microsoft_outlook"/>
-                                    <div>
-                                        <label string="Outlook Credentials" for="module_microsoft_outlook"/>
-                                        <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app"
-                                            title="Get Outlook API credentials" class="o_doc_link" target="_blank"/>
-                                        <div class="text-muted">
-                                            Send and receive emails through your Outlook account.
-                                        </div>
-                                        <div class="content-group" id="msg_module_microsoft_outlook"
-                                            attrs="{'invisible': [('module_microsoft_outlook','=',False)]}">
-                                            <div class="mt16 text-warning">
-                                                <strong>Save</strong> this page and come back here to set up the feature.
-                                            </div>
-                                        </div>
+                                <div class="content-group" attrs="{'invisible': [('module_google_gmail','=',False)]}" id="msg_module_google_gmail">
+                                    <div class="mt16 text-warning"><strong>Save</strong> this page and come back here to set up the feature.</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-lg-6 o_setting_box" attrs="{'invisible': [('external_email_server_default', '=', False)]}">
+                            <div class="o_setting_left_pane">
+                                <field name="module_microsoft_outlook"/>
+                            </div>
+                            <div class="o_setting_right_pane">
+                                <label string="Use an Outlook Server" for="module_microsoft_outlook"/>
+                                <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app"
+                                    title="Get Outlook API credentials" class="o_doc_link" target="_blank"/>
+                                <div class="text-muted">
+                                    Send and receive emails through your Outlook account.
+                                </div>
+                                <div class="content-group" id="msg_module_microsoft_outlook"
+                                    attrs="{'invisible': [('module_microsoft_outlook','=',False)]}">
+                                    <div class="mt16 text-warning">
+                                        <strong>Save</strong> this page and come back here to set up the feature.
                                     </div>
                                 </div>
                             </div>