JSFiddle - React, Tailwind, and code Playground

HTML

<table style="height: 320px">
<tr><td><div></div></td></tr>
<tr><td><div></div><div></div><div></div></td></tr>
</table>

CSS

tr:nth-of-type(1) { background: yellow; }
tr:nth-of-type(2) { background: lime; }
tr:nth-of-type(1) div { height: 100%; min-height: 32px; }
tr:nth-of-type(2) div { height: 50%; min-height: 32px; }

div { background: rgba(0,0,0,0.5); width: 100px; background-clip: padding-box; border: 10px solid rgba(0,0,0,0.25); box-sizing: border-box; }