<!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>