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;
}

Unfornuatly, 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 dont want to broke its
floating animation.

let label correctly center and animation.