diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 272d344d66..065b0906c6 100644
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@@ -41,6 +41,18 @@
     visibility: hidden;
 }
 
+.order-1 {
+    order: 1;
+}
+
+.order-2 {
+    order: 2;
+}
+
+.order-3 {
+    order: 3;
+}
+
 /*
 Consistent placeholder styling, introduced to allow us to style the
 Reply box like a placeholder.  Chrome uses color to set placeholder,
diff --git a/static/styles/compose.css b/static/styles/compose.css
index 7cfa01d6d2..6c6ed7c076 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -152,12 +152,6 @@
     .messagebox {
         box-shadow: none !important;
     }
-
-    .message-control-link {
-        position: relative;
-        margin-right: 5px;
-        top: 3px;
-    }
 }
 
 #send_message_form {
@@ -186,17 +180,16 @@
 }
 
 #below-compose-content {
+    display: flex;
     width: 100%;
     margin-top: 6px;
 }
 
 #compose_limit_indicator {
-    position: relative;
     margin-right: 8px;
-    top: 3px;
-    float: right;
     font-size: 12px;
     color: hsl(39, 100%, 50%);
+    align-self: center;
 
     &.over_limit {
         color: hsl(0, 100%, 50%);
@@ -427,21 +420,15 @@ input.recipient_box {
 }
 
 #compose-send-button {
-    /* To arrange the right tab order for the compose box keyboard UI,
-       this element appears before its proper position in the DOM and is configured
-       to float right, so that tabbing from the compose box goes here and then
-       to the message controls to its left, to ensure "Tab then Enter" sends messages. */
+    height: 25px;
     padding-top: 3px;
     padding-bottom: 3px;
     margin-bottom: 0;
     font-weight: 600;
-    float: right;
     font-size: 0.9em;
 }
 
 #send_controls {
-    float: right;
-    position: relative;
     font-size: 0.8em;
     height: 2.2em;
 
@@ -461,30 +448,43 @@ input.recipient_box {
 }
 
 #sending-indicator {
-    top: 2px;
-    position: relative;
     font-weight: bold;
-    display: inline-block;
 }
 
-.compose_giphy_link .compose_gif_icon {
-    position: relative;
-    font-size: 23px;
-    top: -4px;
+.compose_control_buttons_container {
+    flex-wrap: wrap;
+    margin-right: auto;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    .compose_gif_icon {
+        font-size: 22px;
+        padding-bottom: 2px;
+    }
+
+    .message-control-link,
+    #sending-indicator {
+        padding: 0 4px;
+        align-self: center;
+    }
+}
+
+.compose_right_float_container {
+    display: flex;
+    white-space: nowrap;
+    gap: 4px;
+    margin-top: 10px;
 }
 
 a.compose_control_button {
+    padding: 5px;
     display: block;
     opacity: 0.7;
     color: inherit;
     text-decoration: none;
-    font-size: 15px;
-    width: auto;
-    height: 15px;
-    margin-right: 8px;
-    padding-top: 5px;
+    font-size: 17px;
     text-align: center;
-    float: left;
 
     &:hover {
         opacity: 1;
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 9238dc26f3..f5923a5826 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -1482,7 +1482,7 @@ div.focused_table {
 
 .message-edit-feature-group {
     display: inline-flex;
-    margin: -10px auto -5px 10px;
+    margin: 0 auto -5px 10px;
     align-items: baseline;
 }
 
@@ -2572,10 +2572,6 @@ div.topic_edit_spinner .loading_indicator_spinner {
             position: relative;
             top: -1px;
         }
-
-        .compose_gif_icon {
-            top: 6px;
-        }
     }
 
     /* Override the default border-radius to properly align
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index 39dcb24878..e944cceaea 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -93,16 +93,19 @@
                             </div>
                             <div class="drag"></div>
                             <div id="below-compose-content">
-                                <button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
-                                {{> compose_control_buttons }}
-                                <span id="sending-indicator"></span>
-                                <div id="send_controls" class="new-style">
-                                    <label id="enter-sends-label" class="compose_checkbox_label checkbox">
-                                        <input type="checkbox" id="enter_sends" />
-                                        <span></span>{{t 'Press Enter to send' }}
-                                    </label>
+                                <div class="compose_right_float_container order-3">
+                                    <button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
+                                </div>
+                                {{> compose_control_buttons }}
+                                <div class="compose_right_float_container order-2">
+                                    <span id="compose_limit_indicator"></span>
+                                    <div id="send_controls" class="new-style">
+                                        <label id="enter-sends-label" class="compose_checkbox_label checkbox">
+                                            <input type="checkbox" tabindex="0" id="enter_sends" />
+                                            <span></span>{{t 'Press Enter to send' }}
+                                        </label>
+                                    </div>
                                 </div>
-                                <span id="compose_limit_indicator"></span>
                             </div>
                         </div>
                     </div>
diff --git a/static/templates/compose_control_buttons.hbs b/static/templates/compose_control_buttons.hbs
index ad7fc6f236..0eebaf712c 100644
--- a/static/templates/compose_control_buttons.hbs
+++ b/static/templates/compose_control_buttons.hbs
@@ -1,11 +1,14 @@
-<input type="file" class="file_input notvisible pull-left" multiple />
-{{#if file_upload_enabled }}
-<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
-{{/if}}
-<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
-<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
-<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
-<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
-<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
-<a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
-<a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
+<div class="compose_control_buttons_container order-1">
+    <input type="file" class="file_input notvisible pull-left" multiple />
+    {{#if file_upload_enabled }}
+    <a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
+    {{/if}}
+    <a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
+    <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
+    <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
+    <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
+    <a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tippy-content="{{t 'Add global time<br />Everyone sees global times in their own time zone.' }}" data-tippy-maxWidth="none" data-tippy-allowHtml="true"></a>
+    <a role="button" class="compose_control_button compose_gif_icon {{#unless giphy_enabled }} hide {{/unless}} zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0 data-tippy-content="{{t 'Add GIF' }}"></a>
+    <a role="button" class="message-control-link" tabindex=0 data-overlay-trigger="message-formatting">{{t 'Help' }}</a>
+    <span id="sending-indicator"></span>
+</div>