JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="ShowDetailsCheckBox" />Show details
<div class="cards">
  <div class="cards-card">
    <div class="cards-card-header">
      Here is some header information
    </div>
    <div class="cards-card-detail">
      <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
    </div>
  </div>
    <div class="cards-card">
    <div class="cards-card-header">
      Here is some header information
    </div>
    <div class="cards-card-detail">
      <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
            <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
    </div>
  </div>
    <div class="cards-card">
    <div class="cards-card-header">
      Here is some header information
    </div>
    <div class="cards-card-detail">
      <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
            <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
            <div class="data-set-wrapper">
        <label class="data-set-label">Label</label>
        <div class="data-set-data">
          some data
        </div>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.cards {
  font-size: 0;
}
.cards-card {
  font-size: 12pt;
  display: inline-block;
  width: 33%;
  vertical-align: top;
  border: 1px solid red;
}
.cards-card:nth-child(2n) {
  width: 34%;
  border: 1px solid green;
}
.cards-card-header {
  height: 100px;
}
.cards-card-detail {
  padding: 10px;
  border-top: 1px solid red;
  display: none;
}
.data-set-wrapper {
  width: 100%;
  font-size: 0;
}
.data-set-label {
  font-size: 12px;
  border: 1px solid red;
  width: 50%;
  display: inline-block;
}
.data-set-data {
  font-size: 12px;
  border: 1px solid red;
  width: 50%;
  display: inline-block;
}

JavaScript

$(document).ready(function () {
	$("#ShowDetailsCheckBox").change(function () {
  	if ($(this).is(":checked")) {
    	setContentDataHeights();
      $(".cards-card-detail").slideDown();      
    }
    else {
    	$(".cards-card-detail").slideUp();
    }
  });
});
function setContentDataHeights () {
            var maxContentDataHeight = 0;

            $(".cards-card-detail").each(function () {
            	if ($(this).height() > maxContentDataHeight)
              	maxContentDataHeight = $(this).height();
            });

            if (maxContentDataHeight > 0) {
                $(".cards-card-detail").each(function () {
                    //$(this).css("height", maxContentDataHeight.toString() + "px");
                    $(this).height(maxContentDataHeight);
                });
            }
        }