CSS с двумя столбцами формы Div, используя текущий стиль формы

Question

У меня есть следующий стиль для моей формы:

.UserForm {

  &__form {
    padding: 10px 24px;
    width: 100%;
  }
  &__form-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;

    .form-field,
    .form-select,
    .textarea {
      width: 60%;
    }

    .profile-image {
       width: 60%;
    }

    .form-label {
      margin-right: 12px;
      width: 30%;
      // text-align: right;
    }

    & > .Password {
      width: 70%;
      max-width: 60%!important;
      margin: 0;
    }

  }
}

А это HTML

<form name="setUser" autocomplete="off" class="UserForm__form">
    <div class="form-row UserForm__form-row">
      <label class="form-label" for="firstName">First Name</label>
      <input
        v-focus
        id="firstName"
        name="firstName"
        class="form-field"
      >
      <span
        v-show="errors.has('firstName')"
        class="form-help is-danger"
      >{{ errors.first('firstName') }}</span>
    </div>

<div class="form-row UserForm__form-row">
  <label class="form-label" for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    class="form-field"
  >
  <span
    v-show="errors.has('lastName')"
    class="form-help is-danger"
  >{{ errors.first('lastName') }}</span>
</div>

</form>

Вот как это выглядит:

Что мне нужно, это то, что только для строки поля имени Мне нужно добавить другой столбец, чтобы текстовое поле было меньше, поэтому я могу добавить флажок только длясправа от поля.

Примерно так:

Answer 1

Вероятно, вам следует обернуть первый столбец в другом контейнере с помощью собственного flexbox:

<form name="setUser" autocomplete="off" class="UserForm__form">
    <div class="form-row UserForm__form-row">
      <div class="UserForm__form-row__firstName-row">
         <label class="form-label" for="firstName">First Name</label>
         <input
           v-focus
           id="firstName"
           name="firstName"
           class="form-field"
         >
         <span
           v-show="errors.has('firstName')"
           class="form-help is-danger"
         >{{ errors.first('firstName') }}</span>
      </div>
    </div>

<div class="form-row UserForm__form-row">
  <label class="form-label" for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    class="form-field"
  >
  <span
    v-show="errors.has('lastName')"
    class="form-help is-danger"
  >{{ errors.first('lastName') }}</span>
</div>

</form>

CSS:

.UserForm__form-row__firstName-row {
   display: flex;
   justify-content: space-between;
}

Answer 2

вы можете попробовать это :

In yout HTML, add a label for the checkbox:

<label class="myCheckbox">
    <input type="checkbox" />
    Active
</label>

And in the SCSS, add this styles after the form-field width:

.form-field:first-of-type {
    width: 40%;
}
.myCheckbox {
    width: 20%;
}

Answer 3

Попробуйте использовать пример "Flex" css:

.UserForm__form {
  display: flex;
  flex-direction: row;
}

Flex css отлично подходит для манипуляций с одной строкой.

Если вы не знакомы с flex, вот действительно хороший ресурс: https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

Вот упрощенный пример внутри фрагмента:

.UserForm__form {
  display: flex;
  flex-direction: row;
}

<form name="setUser" autocomplete="off" class="UserForm__form">

  <div class="form-row UserForm__form-row">
    <label class="form-label" for="firstName">First Name</label>
    <input v-focus id="firstName" name="firstName" class="form-field">
    <input type="checkbox" />
    <label>Active</label>
  </div>

</form>