Выравнивание тегов <input>и <option>одинаково

Question

Я пытаюсь создать <form>, где все параметры <input> и <select> выровнены так, как показано ниже:

Однако, это мой результат:

Как видите, текст <input> выровнен правильно, но выпадающий список не совпадает с ними.Мой код ниже.

HTML :

<form id="survey-form">
    <div class="row">
      <label for="name">* Name:</label>
      <input type="text" id="name" class="input-field" required placeholder="Enter your name">
    </div>
    <br>
    <div class="row">
      <label for="email">* Email:</label>
      <input type="email" id="email" class="input-field" required placeholder="Enter your email">
    </div>
    <br>
    <div class="row">
      <label for="number">*Age:</label>
      <input type="number" min="1" id="number" required class="input-field" placeholder="Age">
    </div>
    <br>
    <div class="row">
      <label for="role">Which option best describes your current role?</label>
      <select name="role" id="role" class="input-select">
    <option value="student">Student</option>
    <option value="full-time-job">Full Time Job</option>
    </div>
    <option value="full-time-learner">Full Time Learner</option>
    <option value="prefer-not-to-say">Prefer not to say</option>
    <option value="other">Other</option>
    </select>
  </form>

CSS :

.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-field {
  margin-left: 1em;
  padding: .5em;
  margin-bottom: .5em;
  height: 20px;
  width: 280px;
  border: 1px solid gray;
  border-radius: 2px;
}
.input-select {
  margin-left: 1em;
  padding: .5em;
  margin-bottom: .5em;
  width: 100px;
  height: 40px;
  border: 1px solid gray;
  border-radius: 2px;
}

Я попытался настроитьjustify-content, align-items, display и другие соответствующие CSS, но, похоже, ничто не могло связать мои <select> и <input> вместе.

Answer 1

Демонстрация Codepen

Начиная с вашего кода, можно использовать короткий метод:

1 - добавить левое / правое поле ксформируйте и присвойте поля width и max-width, например

#survey-form {
  width: 70%;
  max-width: 640px;
  margin: 0 auto;
}

2 - задайте равные поля flex-basis для label и input / select.Также присвойте box-sizing: border-box

.row > * {
  flex-basis: 50%;
  box-sizing: border-box;
}

3- Выровняйте метки вправо

.row label {
  text-align: right;
}