CSS способ выравнивания элементов ввода формы по самой широкой метке

Question

Предположим, у меня есть форма:

<form action="#">
  <p>
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
  </p>

  <p>
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
  </p>

  <p>
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
  </p> 
</form> 

Со следующим CSS:

form {
  width: 400px;
}

p {
  display: flex;
}

label {
  margin-right: 10px;
}

input {
  flex-grow: 1;
}

Это выглядит следующим образом:

I need to align the right side of inputs, based on the widest label. That's what I want:

введите описание изображения здесь

Я не знаю заранее ширину метки, поэтому bootstrap -подобные решения со столбцами здесь не годятся. Есть ли способ добиться этого на чистом HTML / CSS без использования JS?

PS !! : И я не хочу использовать table

Answer 1

Удалите p и используйте сетку CSS:

form {
  width: 400px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:5px;
  margin:10px;
}

input {
  width:100%;
}

<form action="#">
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />

    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />

    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />

</form> 


<form action="#" style="width:600px;">
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />

    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />

    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />

</form> 

Или используйте display:contents с p

form {
  width: 400px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:5px;
  margin:10px;
}

input {
  width:100%;
}

p {
 display:contents;
}

<form action="#">
<p>
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
</p>
<p>
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
</p>
<p>
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
</p>
</form> 


<form action="#" style="width:600px;">
<p>
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
</p>
<p>
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
</p>
<p>
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
</p>
</form>

Answer 2

Вы должны поместить на этикетку flex-grow :):

form {
  width: 400px;
}

p {
  display: flex;
}

label {
  flex: 1;
  margin-right: 10px;
  white-space: nowrap;
}

<form action="#">
  <p>
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
  </p>

  <p>
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
  </p>

  <p>
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
  </p> 
</form> 

Answer 3

Вы можете просто организовать это в таблицу. Это даст вам желаемое форматирование.

Edit: Поскольку вы указали, что не хотите использовать таблицу (и было бы лучше избежать реорганизации вашей html), как насчет стилизации ваших элементов, как если бы они были таблицей? Я изменил свой ответ, чтобы сохранить исходный html без изменений.

form {
  display:table;
}

p {
  display:table-row;
}

label, input {
  display: table-cell;
}

<form action="#">
  <p>
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
  </p>

  <p>
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
  </p>

  <p>
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
  </p> 
</form> 

Answer 4

Вот рабочий пример:

form {
  width: 400px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-group label {
  margin-right: 10px;
  flex: 1;
}

.form-group input {
  min-width: 180px;
}

<form action="#">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" placeholder="John Smith" />
  </div>

  <div class="form-group">
    <label for="name">What do you think about him?:</label>
    <input type="text" placeholder="Your opinion" />
  </div>

  <div class="form-group">
    <label for="name">Another Text Input:</label>
    <input type="text" placeholder="John Smith" />
  </div> 
</form>

Answer 5

Лучший способ сделать это - создать таблицу с двумя столбцами.

<table>
<tr>
<td>label</td>
<td>input</td>
</tr>
<tr>
<td>label</td>
<td>input</td>
</tr>
</table>