How to display all input elements inside an input-group with the same height? (Bootstrap + Demo)

Question

Iam building a time input field (Hours & Minutes) via Bootstrap.

Ive googled a lot and came up with a solution. But the problem is, that the Hour and Minute fields are not on one line.

How can both inputs have the same height?

Demo: https://www.bootply.com/BxjISccVMH

Problem:

Answer 1

I fixed this by putting the label in it's own row, and the input group in the next row.

<div class="container">
  <div class="form-group ">
      <div class="row ">
          <label>Time</label>
      </div>

      <div class="row ">
        <div class="col-xs-12 input-group">
          <input type="text" class="form-control" placeholder="Std.">
          <span class="input-group-addon">:</span>
          <input type="text" class="form-control" placeholder="Min.">
        </div>
      </div>
  </div> 
</div>

Check out my codepen.