在模态内的多个行中对齐Bootstrap表单输入字段

Question

具体来说，问题是：

1. 第一行换行到第二行
2. 输入字段不垂直排列



可能会使用表格，但这可能会破坏移动设备的响应能力。是否有一种干净/优雅的方式来对齐这些输入字段？

https://codepen.io/dtgq/pen/rwQRoK

对于后代，在codepen上的HTML副本：

<div class="modal fade" id="fjFilterModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Filter</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group row">
          <label class="col-form-label col-md-2">Cost</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <div class=input-group>
                  <span class=input-group-addon>$</span>
                  <input class=form-control name="max_cost-gte" type=number placeholder="Minimum" step=1 min=0>
                  <span class=input-group-addon>.00</span>
                </div>
              </div>
              to
              <div class="form-group mx-2">
                <div class=input-group>
                  <span class=input-group-addon>$</span>
                  <input class=form-control name="min_cost-lte" type=number placeholder="Maximum" step=1 min=0>
                  <span class=input-group-addon>.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label col-md-2">Start date</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <input class="form-control" type="date" name="min_date-gte">
              </div>
              to
              <div class="form-group mx-2">
                <input class="form-control" type="date" name="min_date-lte">
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label col-md-2">Available units</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <div class=input-group>
                  <input class=form-control name="sum_vacant-gte" type=number min=0 placeholder="Minimum">
                  <span class=input-group-addon>units</span>
                </div>
              </div>
              to
              <div class="form-group mx-2">
                <div class=input-group>
                  <input class=form-control name="sum_vacant-lte" type=number min=0 placeholder="Maximum">
                  <span class=input-group-addon>units</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#fjFilterModal">
  Filter
</button>