<!DOCTYPE html>
<style>
table { border-spacing:20px; }
td { padding:0; }
.square { width:30px; height:30px; background:blue; }
thead { break-inside:avoid; }
</style>
<p>There should be 2 squares below, and they should not be overlapping.</p>
<div style="columns:2; width:200px; column-fill:auto; column-gap:0; height:295px;">
<div style="height:240px;"></div>
<table style="width:100%;">
<thead>
<td><div class="square"></div></td>
</thead>
<caption style="width:100%; caption-side:bottom;">
<div class="square"></div>
</caption>
</table>
</div>