I need the div with the red border to match the height of the green div on the right. I'm using Bootstrap 4 for this layout!
I've experimented with display: flex and flex-grow, and also tried placing the border on the column (which achieves the desired effect but loses the padding).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 order-lg-1">
<div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
</div>
<div class="col-12 col-lg-6 order-lg-3">
<div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
<p class="mb-3 mb-lg-0 text-large">Write a brief explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
<div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
<div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
<p class="mb-3 mb-lg-0 text-large">Write a brief explanation here</p>
</div>
</div>
</div>
Check out this pen to see the current setup: https://codepen.io/Daggett/pen/OKJxPm
The columns are responsive and should stack on smaller screens (hence the order-lg classes).