Collapse Bootstrap equal height issue

by PauloNatal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<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">
   ...

CSS

.row {
  background-color: blue;
}
.col-md-6 {
  background-color: red;
}

JavaScript

jQuery('button').click( function(e) {
    jQuery('.collapse').collapse('hide');
});