JSFiddle - React, Tailwind, and code Playground
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
This should match the height of the talest card.
</div>
</div>
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class=" body">
Stretch me please!
</div>
</div>
<div class="col-4 card">
<div class="head">
Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
</div>
<div class="body">
I should be dynamic and stretch to fill the rest of the column!
</div>
</div>
</div>
</div>
</div>
CSS
.card {
border: 1px dashed red;
border-radius: 0;
background: #000 !important;
color: #fff;
}
.card .head {
border: 1px solid blue;
padding: 15px;
}
.card .body {
padding: 15px;
border: 1px dashed #000;
background: #fff;
color: #000;
height: 100%;
}