q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상

 안녕하세요

q-span과 q-input을 나란히 배치하는 UI를 만들고 있습니다.
세로 중앙정렬을 위해서 Container에 item-center 옵션을 사용하고 있는데, q-input에 :rules 속성만 주면 중앙 정렬이 깨지네요.
어떻게 해야 세로 중앙정렬이 가능할까요?
아래는 제가 시도해본 4가지 상황입니다.

ps. 글쓰는거 코드랑 함께 넣는거 어렵네요. ㅠㅠ

<template>
  <q-page>
    <!-- 유효성 검사 없이 items-center -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width items-center">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" />
      </div>
    </div>

    <!-- 유효성 검사와 items-center 모두 없음 -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" />
      </div>
    </div>

    <!-- 유효성 검사와 items-center 모두 존재-->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width items-center">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" :rules="['text']" />
      </div>
    </div>

    <!-- 유효성 검사 존재하고 items-center 없을 경우 -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" :rules="['text']" />
      </div>
    </div>
  </q-page>
</template>

<div class="row q-mt-md bg-primary">
  <div class="row full-width items-center">
    <div class="col-3"> <!-- Flex Item을 위한 요소 추가 -->
      <q-span class="text-h6" align="right">신청자</q-span>
    </div>
    <div class="col-1">
       <q-span></q-span>
    </div>
    <div class="col">
      <q-input class="" dense outlined v-model="userName" />
    </div>
  </div>
</div>