After adjust the height of q-input, floating lable tip was broken

I read this tutorial to make my q-input looks bigger than default, here is my code and codepen:

vue

<q-input
  ref="emailInputBox"
  outlined
  v-model="email"
  label="Email"
  type="email"
  class="input-box"
  @input="validateEmail"
>
  <template v-slot:label>
    <div>Email</div>
  </template>
</q-input>

css

:deep(.input-box .q-field__control),
:deep(.input-box .q-field__marginal) {
  height: 75px;
  font-size: 20px;
}

Unfortunately, after resize the height of input box, the position of the label is broken:

the input box image

As above image shown, the label is no longer in the center of input box, so how to style it and I don't want to broke its floating animation.

let label correctly center and animation.

you can adjust that using transform translate

.input-box .q-field__control,
.input-box .q-field__marginal {
  height: 75px;
  font-size: 20px;
}

.input-box .q-field__label {
  font-size: 20px;
  transform: translateY(50%);
  transition: transform 0.3s ease-out;
}

.input-box.q-field--float .q-field__label {
  transform: translateY(-50%) scale(0.55);
}

Adjust the font size and translateY as needed.