Как выровнять инпуты элементы и прижать к ним текст?

Question

Как можно выровнять форму по центру, при этом, что бы центральный input был один под другим, а текст был прижат к нему? Используя flex.

.parent {
  width: 400px;
  padding: 10px;
  border: 1px dashed red;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 5px;
}

.small {
  width: 40px;
}

<div class="parent">
  <div class="row">
    <span>Name:</span>
    <input type="text"><br>
  </div>
  <div class="row">
    <span>Surname:</span>
    <input type="text">
  <input class="small" type="text">
  </div>
</div>

Answer 1

Вариант:

Засуньте лейблы в один блок и выровняйте вправо, а инпуты - в другой.
Выровняйте лейблы и инпуты по высоте с помощью line-height.
Оба блока расположите рядом и отцентрируйте.

Флекс вообще не нужен.

В старину это версталось таблицей, и делало то, что надо, так, как надо. Но увы, если сейчас примените таблицу - вас засмеют, обольют смузи и будут считать чуханом.

Answer 2

Если очень хочется именно флексами, то можно, например так:

.parent {
  width: 400px;
  padding: 10px;
  border: 1px dashed red;
  display: flex;
  justify-content: center;
}

.labels, .center, .right {
  padding: 5px;
}

.labels {
  text-align: right;
}

.center input, .right input {
  margin-bottom: 10px;
}

.right {
  display: flex;
  align-items: flex-end
}

.small {
  width: 40px;
}

<div class="parent">
  <div class="labels">
    <span>Name:</span><br>
    <span>Surname:</span>
  </div>
  <div class="center">
    <input type="text"><br>
    <input type="text">
  </div>
  <div class="right">
    <input class="small" type="text">
  </div>
</div>

Я в своём примере текст прижал к правому краю блока, то есть к полям ввода текста, но не сделал разбежку по вертикали, это уж вы сами.

БЛОГ НА HUSL

Как выровнять инпуты элементы и прижать к ним текст?

Ответы (2 шт):