I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" style="background-color:lavender">
<p>Table with hover, striping, borders, context</p>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a0a1a284b7aba9a1a9a5ada8eaa7aba9">[email protected]</a></td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef4f1fbdefbe6fff3eef2fbb0fdf1f3">[email protected]</a></td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f59f9a90b5908d9498859990db969a98">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavender;">
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
</body>As seen in the image below: https://i.sstatic.net/QP1K4.png The left column's height adjusts automatically with the table height. However, the right column does not adjust its height according to the left column. I want the right column's height to be relative to the left column's height, splitting evenly into 2 stacked columns and adjusting automatically with the left column's width. For instance, if the table has more rows, the left column's height increases, and the right column's height should increase as well, remaining at 50% of the left column's height. This would result in a layout like the one shown in the image below: