Как выровнять блоки формы как на картинке?

Question

[Im p3l]

Добрый день, учусь верстать, столкнулся с проблемой. Не получается выровнять блоки формы как на макете.

<div class="feedback__form">
        <form>
          <label>
            <select class="feedback__type">
              <option>Выберите тип обращения</option>
            </select>
            <input type="text" placeholder="Имя *" class="feedback__name">
            <input type="email" placeholder="E-mail *" class="feedback__email">
            <input type="tel" placeholder="Телефон" class="feedback__phone">
            <input type="text" placeholder="Сообщение *" class="feedback__text-input">
            <button type="submit" class="feedback__submit">Отправить</button>
          </label>
        </form>
    </div>

.feedback .feedback__form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 213px;
  background-color: #f1f1f1;
}

.feedback .feedback__type {
  margin: 18px 0 0 18px;
  padding-left: 5px;
  width: 323px;
  height: 35px;
  border: 2px solid #bababa;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.feedback__name,
.feedback__email,
.feedback__phone {
  margin: 18px 0 0 18px;
  padding-left: 10px;
  width: 310px;
  height: 31px;
  border: 2px solid #bababa;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.feedback .feedback__text-input {
  position: relative;
  top: 50px;
  left: 40px;
  width: 638px;
  height: 129px;
  border: 2px solid #bababa;
  background-color: #ffffff;
}

.feedback .feedback__submit {
  width: 114px;
  height: 31px;
  background-color: #c3325f;
  border: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

Comments

[Антон Плашкевич]

https://codepen.io/aguwicka/pen/rNBPrXg
Ну а дальше стилизуете

Answer 1

[Robert-critical-thoughts]

Переправлять долго, суть такая:
Дополнительная обертка для label и input с flex-direction: column; (что бы выстроились по вертикали)
Дополнительная обертка для textarea и button, тоже самое.

И для сообщения существует свой тэг, не input type="text", а textarea
Label не привязывают к 5 input, обычно label нужен что бы связать его с input по id => for, что бы при клике по label ставился чекпоинт(или курсор), на тот инпут к которому привязан label