JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

the bad table:
<fieldset class="table">
    <fieldset class="row">
        <div class="legend">the legend</div>
        <label><input type="checkbox" /></label>
        <label><input type="checkbox" /></label>
    </fieldset>
    <fieldset class="row">
        <div class="legend">the legend</div>
        <label>this<input type="checkbox" /></label>
        <label>thathtat<input type="checkbox" /></label>
    </fieldset>
    <fieldset class="row">
        <div class="legend">the legend</div>
        <label><input type="checkbox" /></label>
        <label><input type="checkbox" /></label>
    </fieldset>
</fieldset>

<br />


the good table:
<div class="table">
    <div class="row">
        <div class="legend">the legend</div>
        <label><input type="checkbox" /></label>
        <label><input type="checkbox" /></label>
    </div>
    <div class="row">
        <div class="legend">the legend</div>
        <label>this<input type="checkbox" /></label>
        <label>thathtat<input type="checkbox" /></label>
    </div>
    <div class="row">
        <div class="legend">the legend</div>
        <label><input type="checkbox" /></label>
        <label><input type="checkbox" /></label>
    </div>
</div>

CSS

.table{
    display: table;}

.row{    
    display: table-row;}

.row div, .row label{
    display: table-cell;
    border: 1px solid blue;}