Setting Height on Bootstrap Card - html

Question

So I have a row with 2 columns. One column has 2 cards in it while the other column has 1 card in it. The content of the second card and the third card are dynamic.
Is there a way using css to have the cards auto set the height so that the bottom of the cards line up? When the card called "secondPanel" has less content than the card called "thirdPanel" I'd like the height on secondPanel to be increased so that the bottom of it lines up with the bottom of thirdPanel and when thirdPanel is smaller than secondPanel for thirdPanel's height to be increased so that the bottom of it lines up with the bottom of secondPanel.
I've tried using the boostrap h-100 classes to get this to work but overall height of the parent containers are never set anywhere so that class doesn't seem to do anything. I know I can accomplish this using javascript to compare the heights and set it that way but I'd like to do it with pure CSS or existing bootstrap functionality if possible.
<div class="container">
<div class="row">
<div class="col">
<div class="card" id="firstPanel">
<div class="card-body">
<h3 class="card-title">Here's the 1st panel</h3>
<div class="card-text">We'll add a little text to fill out the height of the card a little bit</div>
</div>
</div>
<div class="card" id="secondPanel">
<div class="card-body">
<h3 class="card-title">Here's the 2nd panel</h3>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem"</div>
</div>
</div>
</div>
<div class="col">
<div class="card" id="thirdPanel">
<div class="card-header card-title">
<div class="row">
<div class="col">
Results
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="result-summary-row">
<td>Smith, Robert</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Jones, Ralph</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Jefferson, Julio</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Brauman, Derrick</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>James, Henry</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

Answer 1

In your case you should encapsulate the two panel in a flex div then make the second panel fill the rest of the parent using flex: 1, hope it will help
#secondPanel {
flex:1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="d-flex flex-column h-100">
<div class="card" id="firstPanel">
<div class="card-body">
<h3 class="card-title">Here's the 1st panel</h3>
<div class="card-text">We'll add a little text to fill out the height of the card a little bit</div>
</div>
</div>
<div class="card" id="secondPanel">
<div class="card-body">
<h3 class="card-title">Here's the 2nd panel</h3>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem"</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100" id="thirdPanel">
<div class="card-header card-title">
<div class="row">
<div class="col">
Results
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="result-summary-row">
<td>Smith, Robert</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Jones, Ralph</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Jefferson, Julio</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>Brauman, Derrick</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
<tr class="result-summary-row">
<td>James, Henry</td>
<td>Report Ready</td>
<td>
<span> View Report</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>