I want all columns following the first row with col-md-6 to have equal height, regardless of dynamic content (go to full page).
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a243a26">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150b1509">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-xs-3">
<div class="row">
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There may be some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</div>
</div>
</body>
</html>