How to align two inputs side by side inside a Bootsrap row?

Question

The two inputs get misaligned due to the difference in length of the label text. Below is the part of my code:

<div class="row">
    <div class="col-auto col-md-6 form-group">
         <label for="category">Which of the following best describes you?</label>
         <select class="form-control" id="category" name="category">
             <option>Furniture Designer</option>
             <option>Architect</option>
         </select>
    </div>

    <div class="col-auto col-md-6 form-group">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

</div>

How can I easily fix the misalignment and keeping the form resposive?

Answer 1

You could make the form-group's d-flex flex-column and then use mt-auto on the form input to force bottom alignment:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<div class="container py-2 px-5">
  <div class="row">
    <div class="col-auto col-md-6 form-group d-flex flex-column">
      <label for="category">Which of the following best describes you?</label>
      <select class="form-control mt-auto" id="category" name="category">
        <option>Furniture Designer</option>
        <option>Architect</option>
      </select>
    </div>
    <div class="col-auto col-md-6 form-group d-flex flex-column">
      <label for="training">Education level/type </label>
      <input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
    </div>
  </div>
</div>

https://codeply.com/p/S9wKwrKLch

OR, use the text-truncate class on the labels to prevent text wrapping:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<div class="container py-2 px-5">
  <div class="row">
    <div class="col-auto col-md-6 form-group">
      <label for="category" class="text-truncate">Which of the following best describes you?</label>
      <select class="form-control mt-auto" id="category" name="category">
        <option>Furniture Designer</option>
        <option>Architect</option>
      </select>
    </div>
    <div class="col-auto col-md-6 form-group">
      <label for="training" class="text-truncate">Education level/type </label>
      <input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
    </div>
  </div>
</div>

https://codeply.com/p/S9wKwrKLch