Struggling to create a form using bootstrap 4, encountering an issue with aligning one column at the bottom:
https://i.sstatic.net/y0BA7.png
Here is the code snippet:
<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/
Troubleshooting the alignment issue, attempted to use align-self-end, but no success so far.