JSFiddle - React, Tailwind, and code Playground

HTML

<div class="v1"> Вариант 1
<div class="inputbox">
  <label class=inputbox__label>Имя:</label>
  <div class="inputbox__wrap">
    <input class=inputbox__input type="text">
  </div>
</div>
<div class="inputbox">
  <label class=inputbox__label>Имя с фамилией:</label>
  <div class="inputbox__wrap">
    <input class=inputbox__input type="text">
  </div>
</div>
</div>

<hr>

<div class="v2"> Вариант 2
<div class="inputbox">
  <label class=inputbox__label>Имя:</label>
  <input class=inputbox__input type="text">
</div>
<div class="inputbox">
  <label class=inputbox__label>Имя с фамилией:</label>
  <input class=inputbox__input type="text">
</div>
</div>

SCSS

%clearfix {
  &::before, &::after { content: ''; display: table;}
  &::after { clear: both; }
}

.v1, .v2 {
  width: 90%;
  border: 3px solid magenta;
  margin: auto;
}

.v1 {
  .inputbox {
    @extend %clearfix;
    width: 100%;
    margin: 5px 0;

    &__label {
      float: left;
    }

    &__wrap {
      overflow: hidden;
    }

    &__input {
      width: 100%;
    }
  }
}

.v2 {
  .inputbox {
    width: 100%;
    margin: 5px 0;
    display: flex;
    align-items: center;

    &__label {
      white-space: nowrap;
    }

    &__input {
      width: 100%;
    }
  }
}