Bootstrap - выравнивания отключены, не знаю как это исправить

Question

Я измотан, не могу выстроить элементы и тону в супе.Что мне здесь не хватает?

Элемент Date and Time смещен, но я чувствую, что это является частью более крупной структурной проблемы.Кроме того, в окончательной версии переключатели выровнены по верху соответствующего контейнера, я попытался использовать align-self, но, похоже, это не сработало.

Есть идеи или предложения?

Где я сейчас нахожусь:

Каким должен быть результат:

    <div class="row row-content align-items-center">
      <div class="col-12 offset-md-2 col-md-8">
        <div class="card">
          <h3 class="card-header bg-warning text-white">Reserve a Table</h3>
          <div class="card-body">
            <!-- Number of Guests -->
              <label for="numberOfGuests" class="col-md-2 col-form-label"><strong>Number of Guests</strong></label>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">1</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">2</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">3</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">4</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">5</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">6</label>
              </div>
            <!-- Date and Time -->
              <div class="row">
                <label for="dateAndTime" class="col-md-2 col-form-label"><strong>Date and Time</strong></label>
                  <div class="col-md-4">
                      <input type="text" class="form-control" id="date" name="date" placeholder="Date">
                  </div>
                  <div class="col-md-4">
                      <input type="text" class="form-control" id="time" name="time" placeholder="Time">
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

Это должно работать:

<div class="row row-content align-items-center">
    <div class="col-12 offset-md-2 col-md-8">
      <div class="card">
        <h3 class="card-header bg-warning text-white">Reserve a Table</h3>
        <div class="card-body">
          <!-- Number of Guests -->
          <div class="row">
            <label for="numberOfGuests" class="col-md-2 col-form-label"><strong>Number of Guests</strong></label>
            <div class="col-md-8">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">1</label>
              </div>
              ...
              </div>
            </div>
          </div>
          <!-- Date and Time -->
          <div class="row">
            <label for="dateAndTime" class="col-md-2 col-form-label"><strong>Date and Time</strong></label>
            <div class="col-md-4">
              <input type="text" class="form-control" id="date" name="date" placeholder="Date">
            </div>
            <div class="col-md-4">
              <input type="text" class="form-control" id="time" name="time" placeholder="Time">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>