JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

table { width: 300px; table-layout: fixed; }
td { height: 30px; background: rgba(0,255,0,0.7); }
div { height: 15px; width: 150px; background: rgba(0,0,255,0.7); }

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

div { margin-left: -25px }