JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<div id="card1" class="card">
  <div class="header"></div>
  <div class="content">This should be the same size</div>
  <div class="content2"></div>
  <div class="footer"></div>
</div>

<div id="card2" class="card">
  <div class="header"></div>
  <div class="content">as this</div>
  <div class="footer"></div>
</div>

CSS

html, body {height: 100%;}

body {
  display: flex;
}

#card1 {
  min-height: 80%;
  background-color: green;
}

#card2 {
  min-height: 40%;
  background-color: green;
}

.card {
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin: 4px;
}

.header {
  width: 100%;
  height: 24px;
  background-color: lightgreen;
}

.content {
  width: 100%;
  background-color: lightseagreen;
  flex: 1;
}

.content2 {
  width: 100%;
  background-color: limegreen;
  flex: 1;
}

.footer {
  width: 100%;
  height: 24px;
  background-color: lightgreen;
}

JavaScript

$(document).ready(function(){
console.log("card1",$("#card1 .content").height());
console.log("card2",$("#card2 .content").height());
	$("#card2 .content").height($("#card1 .content").height());
console.log("card2",$("#card2 .content").height());
});