I am trying to create a layout with two columns inside a bootstrap row using only CSS/flexbox and I want to achieve the design shown in this image: View Result
Specifically, I want the left column's space to be distributed so that the two input fields (one in each column) align perfectly next to each other, with the input in the left column having the same amount of space below it as the height of the "TEXT TEXT" content below the input in the right column. Explanation of Result
Below is my code. I have almost achieved the desired result but I am struggling to calculate or adjust the space below the input in the left column:
<div class="row">
<div class="col-xl-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
</div>
</div>
<div class="col-xl-6 d-flex flex-column justify-content-between">
<div>
<label for="deliverypoint_code">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
</div>
<div>
<div>
<input type="text" id="deliverypoint_code" name="deliverypoint_code" class="w-100 p-3">
</div>
<div class="mt-2">
<span class="error-message">TEXT TEXT</span>
</div>
</div>
</div>
</div>
This is how the current result looks: Failed Attempt