Выровняйте радиокнопку с меткой, где метка имеет встроенный ввод с помощью Vue и Bootstrap

У меня есть форма с группой переключателей, где одна из меток переключателя включает другой (числовой) ввод.

На данный момент это выглядит следующим образом, т. е. переключатель не совмещен с остальной частью метки. Я еще не могу разобраться в css-spacing, paddings, margins и т. Д., И я застрял в том, чтобы выяснить, какой элемент должен получить, какой класс для этого центрируется. Буду очень признателен за любую помощь.

Песочница: https://codesandbox.io/s/keen-christian-s7u3c?file=/src/components/HelloWorld.vue

Код:

        <b-form-group label="Radio Buttons with Inline Input">
          <b-form-radio-group stacked v-model="radioValue">
            <div>
              <b-form-radio name="radio1" value="ONE"
                >this is
                <b-form-spinbutton
                  :disabled="radioValue === 'TWO'"
                  v-model="numberValue"
                  size="sm"
                  inline
                ></b-form-spinbutton>
                not aligned
              </b-form-radio>
            </div>
            <b-form-radio name="radio2" value="TWO"
              >this is aligned</b-form-radio
            >
          </b-form-radio-group>
        </b-form-group>