How to have a div fill the whole height of its parent column in Bootstrap

Question

I'm looking to have the div with the red border to be the same height as its green counterpart on the right? This is in bootstrap 4!

Have tried display: flex and flex-grow, have also tried putting the border on the column (which makes the effect I'm looking for) but it then doesn't have 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 short 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 short explanation here</p>
    </div>
  </div>
</div>

Here's a pen with the existing: https://codepen.io/Daggett/pen/OKJxPm

The columns are also responsive and need to stack at smaller breakpoints (hence the order-lg classes)

Answer 1

add d-flex to the column to use the default stretch behavior and have the same height. Also add w-100 to the element to keep it's default full width:

<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 d-flex">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">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 short explanation here</p>
    </div>
    <div class="col-12 col-lg-6 order-lg-2 d-flex">
      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">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 short explanation here</p>
    </div>
  </div>
</div>