Floating label on readonly input field

In readonly input fields, the border appears over the labels.

I managed to solve this problem by adding the class "form-control--email" to the input field.

<div class="form-outline mb-4 col-12 col-xl-6 form-outline--height d-flex" data-mdb-input-init>
  <input
      class="form-control bg-white text-dark form-control--email"
      id="formControlReadonly"
      type="email"
      value="<%= current_user.email%>"
      aria-label="readonly input example"
      readonly
  />
  <label class="form-label" for="formControlReadonly">Your current Email-ID</label>
</div>

And in scss

.form-outline{
    &--height{
        height: 46px;
     }
    .form-control{
        &--email  ~ .form-notch .form-notch-middle{
          min-width: 140px;
          border-top: 1px solid transparent;
        }
    }
}

Is this solution acceptable, and is there a simpler way to solve this?

I did something similar, and to increase the height of the input field, I added the class "form-outline--height". Is there any other way to increase the field's height?