Incorrect floating label positioning on responsive input form

I've created a form using Django, Crispy Forms and Bootstrap.
At screen widths above 575px the form and labels look as expected with fields of the correct width and floating labels in the correct position, however at screen widths below 575px the floating labels appear in the wrong position. I'd appreciate any guidance as to how I can make the floating labels remain in the correct position relative to the input field regardless of screen width.

Expected: >575px

Unexpected: <575px

I believe this happens because, in order to force the responsive resizing of the input fields, I manually amended the CSS to reduce the the field width to 85% at screen widths lower than 575px by using a media query as follows:

CSS

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  
}

@media (max-width: 575px) {
  .form-floating > .form-control,
  .form-floating > .form-select {
    display: block;
    width: 85%;
    padding: 0.375rem 0.75rem;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .form-floating > label {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  }
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center" style="margin-top: 50px;">

     
     <div class="col-md-4 mb-4 mb-md-0">
     <div class="border rounded bg-light h-100">
        <div class="row justify-content-center">
             <h5 class="text-center"> Login Please</h5>
        </div>
        <br>
       <div class="col-sm-10  mx-auto">
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>
       </div>
       </div>
       </div>
    </div>
  </div>

CODEPEN LINK
https://codepen.io/lowdowner/pen/LYJyaGP

The problem is with the padding of form label.

Update your CSS media query code with this below:

@media (max-width: 575px) {
      .form-floating > .form-control,
      .form-floating > .form-select {
        display: block;
        width: 85%;
        padding: 0.375rem 0.75rem;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .form-floating > label {
        position: absolute;
        top: 0.5rem;
        left: 0.75rem;
        padding: 1rem 3.2rem!important;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
      }
    }

Please note I have just added padding: 1rem 3.2rem!important; to .form-floating > label CSS attribute

Here is the updated code pen link: https://codepen.io/gd17/pen/RwYVOdq

On the class .form-floating > label I added padding with 1rem 3.2rem!important; as the label of input doesn't have any padding for smaller screen. Also, the reason I used !important in the end to override the global padding associated with this class for larger screens. You can check about this more here: !important CSS keyword