JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td><div></div><hr/></td>
  <td><div></div><hr/></td>
  <td><div></div><hr/></td>
</tr>
</table>

CSS

table { width: 300px; table-layout: fixed; }
td { height: 30px; background: rgba(0,255,0,0.5); }
div { height: 15px; width: 150px; background: rgba(0,0,255,0.25); }
hr { margin: 0px; }
td { overflow: scroll }

td:nth-child(2n) div { margin-top: 15px }
td:nth-child(2n+1) div { margin-bottom: 15px }