Add container div and use flex display

Author: sabernhardt

src/wp-admin/css/login.css

@@ -125,6 +125,19 @@ p {
 	position: relative;
 }
 
+.js.login .has-password-toggle {
+	display: flex;
+}
+
+.js.login .has-password-toggle .password-input {
+	padding-right: 0.3125rem;
+}
+
+.js.login .has-password-toggle .button.wp-hide-pw {
+	border-color: inherit;
+	position: static;
+}
+
 .no-js .hide-if-no-js {
 	display: none;
 }

src/wp-login.php

@@ -941,11 +941,13 @@ function wp_login_viewport_meta() {
 				</p>
 
 				<div class="wp-pwd">
-					<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
+					<div class="has-password-toggle">
+						<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
 
-					<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
-						<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
-					</button>
+						<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+							<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+						</button>
+					</div>
 					<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
 				</div>
 				<div class="pw-weak">
@@ -1392,7 +1394,7 @@ function wp_login_viewport_meta() {
 
 			<div class="user-pass-wrap">
 				<label for="user_pass"><?php _e( 'Password' ); ?></label>
-				<div class="wp-pwd">
+				<div class="wp-pwd has-password-toggle">
 					<input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" autocomplete="current-password" />
 					<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
 						<span class="dashicons dashicons-visibility" aria-hidden="true"></span>