diff --git a/web/styles/settings.css b/web/styles/settings.css
index 73cbb58ed0..3bdd94b66b 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -1156,20 +1156,53 @@ input[type="checkbox"] {
 
 #api_key_form,
 #change_password_modal {
-    .password-div {
-        position: relative;
+    .settings-password-div {
+        display: flex;
+        flex-wrap: wrap;
 
-        & input[type="text"] {
-            margin-bottom: 10px;
+        .modal-field-label {
+            /* Keep the label to its own
+               line in the wrapping flexbox. */
+            flex: 0 0 100%;
+        }
+
+        .modal_password_input {
+            /* The usual width of input is 206px, but we reduce
+               it by 30px to make way for the padding. */
+            width: 176px;
+            padding-right: 30px;
         }
 
         .password_visibility_toggle {
-            position: absolute;
-            left: 194px;
-            top: 32px;
-            width: 14px;
+            /* We're going to use flexbox, not
+               positioning, to get the clear button
+               over top of the input. This -2em
+               margin accomplishes that, in tandem
+               with the 2em width of this element,
+               which is shared with the ending
+               anchor element in left sidebar header
+               rows. We're using em instead of pixels
+               so the whitespace between the input box
+               and the icon doesn't decrease when the
+               icon's font-size increases when switching
+               from 14px info density to 16px info density
+               mode. */
+            width: 2em;
+            margin-left: -2em;
+
+            /* Make the button itself a flex container,
+               so we can perfectly center the X icon. */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
             opacity: 0.6;
 
+            /* Make the bottom margin same as `.modal_password_input`
+               for proper centering, if the margin changes there,
+               it should also change here and vice versa. */
+            margin-bottom: 10px;
+
             &:hover {
                 opacity: 1;
             }
diff --git a/web/templates/dialog_change_password.hbs b/web/templates/dialog_change_password.hbs
index caac1282af..0bfd843045 100644
--- a/web/templates/dialog_change_password.hbs
+++ b/web/templates/dialog_change_password.hbs
@@ -1,5 +1,5 @@
 <form id="change_password_container">
-    <div class="password-div">
+    <div class="settings-password-div">
         <label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
         <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block modal_password_input" value="" />
         <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
@@ -7,7 +7,7 @@
             <a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
         </div>
     </div>
-    <div class="password-div">
+    <div class="settings-password-div">
         <label for="new_password" class="modal-field-label">{{t "New password" }}</label>
         <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block modal_password_input" value=""
           data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />
diff --git a/web/templates/settings/api_key_modal.hbs b/web/templates/settings/api_key_modal.hbs
index ac2739531e..d356f248f3 100644
--- a/web/templates/settings/api_key_modal.hbs
+++ b/web/templates/settings/api_key_modal.hbs
@@ -12,7 +12,7 @@
                     <span class="alert-notification" id="api_key_status"></span>
                     <div id="api_key_form">
                         <p>{{t "Please re-enter your password to confirm your identity." }}</p>
-                        <div class="password-div">
+                        <div class="settings-password-div">
                             <label for="password" class="modal-field-label">{{t "Your password" }}</label>
                             <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
                             <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>