вложенные столбцы начальной загрузки 4 выровнять снизу

Question

Я пытаюсь создать форму с помощью начальной загрузки 4, и у меня возникла проблема с выравниванием одного столбца снизу:

моя проблема

А это мой код:

<div class="col-md-3 m-2">
  <div class="row">
    <div class="col-12 d-flex flex-column border border-primary bg-light rounded form-group h-100">
      <h3>text</h3>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>

    </div>

    <div class="col-12 border border-primary bg-light rounded form-group h-100 col align-self-end">
      <h3>bottom box</h3>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
      <div class="form-group">
        <label for="i1">i1</label>
        <input type="text" class="form-control" name="i1" id="i1" placeholder="i1" value="223108853">
      </div>
    </div>

  </div>
</div>

https://jsfiddle.net/rotor82/c7ugmsw8/3/

Я не уверен, как это исправить, я попытался выровнять себяконец, но это не работает.

Answer 1

Если вы установите следующий элемент на margin-bottom: 0 (в настоящее время он установлен на 15px), вы решите свою проблему.

.col-md-3.m-2:nth-of-type(2) .col-12:last-of-type {
  margin-bottom: 0;
}

jsFiddle