Bootstrap collapse element row height issue

Question

Is there any way to prevent the following issue from happening when using bootstrap collapse elements?

Here is my code:

<div class="block-wrapper challenges-solutions">
  <div class="container">
    <div class="row">

  <div class="col-12 col-md-6">
    <div class="challenge-solution-header">
      <h3><i class="fab fas fa-file-contract"></i><span>Title 1</span></h3>
    </div>
    <div class="challenge-solution-body">

      <button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-1" aria-expanded="false" aria-controls="expand-1">
        Challenge
      </button>

      <button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-2" aria-expanded="false" aria-controls="expand-2">
         Solution
       </button>

    </div>
    <div class="challenge-solution-footer">

      <div class="collapse" id="expand-1">
        <div class="card card-body">
          Expand 1 text
        </div>
      </div>

      <div class="collapse" id="expand-2">
        <div class="card card-body">
          Expand 2 text
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6">
    <div class="challenge-solution-header">
      <h3><i class="fab fas fa-file-contract"></i><span>Title 2</span></h3>
    </div>
    <div class="challenge-solution-body">

      <button class="btn challenges-btn" type="button" data-toggle="collapse" data-target="#expand-3" aria-expanded="false" aria-controls="expand-1">
        Challenge
      </button>

      <button class="btn solutions-btn" type="button" data-toggle="collapse" data-target="#expand-4" aria-expanded="false" aria-controls="expand-2">
         Solution
       </button>

    </div>
    <div class="challenge-solution-footer">

      <div class="collapse" id="expand-3">
        <div class="card card-body">
          Expand 1 text
        </div>
      </div>

      <div class="collapse" id="expand-4">
        <div class="card card-body">
          Expand 2 text
        </div>
      </div>
    </div>
  </div>
  
</div>

Here is a reproduction of the issue: jsfiddle

I think the issue is with the row class. It will always expand side columns to match height. Is there a way to prevent that?