Как сделать ввод формы вертикальным, а не горизонтальным, используя CSS?

Question

Я знаю, что это очень простой c вопрос; Я новичок в программировании и прохожу свой первый курс из FreeCodeCamp.

Мне нужно собрать форму опроса и вводимые по умолчанию данные отображаются горизонтально. Я искал часы и не могу понять, как заставить их отображаться вертикально. Вот кодовая ручка формы: https://codepen.io/callowaycodes/pen/wvKBPej

Некоторые примеры, которые я видел в Интернете, были довольно сложными для такого простого решения. Нет ли способа просто применить одну или две строки CSS к идентификатору формы для достижения этого эффекта в этом разделе:

#survey-form {
  font-size: 20px;
  font-weight: bold;
} 

Answer 1

Самое простое, что вы можете сделать, не входя в свойства flexbox, - это обернуть каждый элемент input и label в элемент div (блочный элемент), поскольку входные данные и метка по умолчанию являются встроенными элементами, и поэтому они являются сложены одна сторона друг друга. Встроенные элементы получают ширину содержимого, а блочные элементы - ширину 100%.

Простой пример:

<div>
  <label>Name</label>
  <input type="text" />
</div>

<div>
  <label>Password</label>
  <input type="text" />
</div>

Ссылка с разрешением: https://codepen.io/fenwil/pen/oNjgQKw