diff --git a/scss/_variables.scss b/scss/_variables.scss
index 761bb455dc53..45c8a1aed1d7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1000,8 +1000,9 @@ $form-floating-padding-y:         1rem !default;
 $form-floating-input-padding-t:   1.625rem !default;
 $form-floating-input-padding-b:   .625rem !default;
 $form-floating-label-opacity:     .65 !default;
-$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
+$form-floating-label-scale:       .85 !default;
+$form-floating-label-transform:   scale($form-floating-label-scale) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out, width .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
 // Form validation
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index acefe4ebc709..c2f596edf6ca 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -54,6 +54,7 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
+      width: 100% / $form-floating-label-scale;
       opacity: $form-floating-label-opacity;
       transform: $form-floating-label-transform;
     }
@@ -61,6 +62,7 @@
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
+      width: 100% / $form-floating-label-scale;
       opacity: $form-floating-label-opacity;
       transform: $form-floating-label-transform;
     }