Align Contents Bottom for form-group in Bootstrap v4

Question

Right now I am having the issue where my label overflows and wraps around, making the input field not align to the bottom of the div. Is there a simple CSS way to do this?

I have tried position relative/absolute, display inline block + vertical align bottom, etc.

Any tips / assistance would be very appreciated!!11!1

<div class="form-row m-0">
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theHours"><b>Hours</b></label><input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp"></div>
</div>
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theOrder"><b>Work Order / Notification / Emergency</b></label><input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp"></div>
</div>

Answer 1

Do not use the inner col. Change the display of col-md-6 columns to flex and their direction to column. And then align them however you like.

1. d-flex - change display of column to flex
2. flex-column - change direction of column to column
3. justify-content-end - align content of the columns at the end. You can also use justify-content-between.

I use col-6 instead of col-md-6 because col-md-6 is for screen size bigger than ≥768px only.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row m-0">
  <div class="col-6 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theHours"><b>Hours</b></label>
    <input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp">
  </div>
  <div class="col-6 p-0 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theOrder"><b>Work Order / Notification / Emergency</b></label>
    <input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp">
  </div>
</div>

https://codepen.io/anon/pen/xzgZXa