Встроенная форма ввода с надписью над центром ввода

Question

У меня есть форма с длинными метками над каждым входом, и я хочу, чтобы вход центрировался под каждой меткой, но мне также нужны входы, чтобы оставаться в линии.Это должно выглядеть так, как показано ниже, но входы должны быть центрированы под каждой длинной меткой.

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

.question-container {
  width: 1000px;
  margin: 0 auto;
}

#questions {
  margin: 5px 30px;
  display: inline-block
}

<div class="form-inline">
    <span id="questions">
        <label>How much will your house cost?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
    <span id="questions">
        <label>What is the most you can pay monthly?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
    <span id="questions">
        <label>What is your Current Monthly Rent?</label>
        <input class="form-control" type="text" placeholder="input">
      </span>
  </div>
  <div id='centered'>
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </div>

Любая помощь будет принята с благодарностью!

Answer 1

Понял!

Просто нужно было добавить text-align:center; к промежутку

#questions {
   margin:5px 30px;
   display:inline-block;
   text-align:center;
}