JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<body>
    <div class="table">
        <div class="tr">
            <div class="th">Column 1</div>
            <div class="th">Column 2</div>
            <div class="th">Col 3</div>
            <div class="th">Col 4</div>
            <div class="th">Col 5</div>            
        </div>        
        <form class="tr">
            <label class="td">Some text</label>
            <input name="row1-cell2" class="td" value="a" />
            <input name="row1-cell3" class="td" value="b" />
            <input name="row1-cell4" class="td" value="c" />
            <input name="row1-cell4" class="td" value="d" />           
        </form>        
        <form class="tr">
            <div class="td">Other text</div>
            <div class="td"><input/></div>
            <div class="td"><input/></div>
            <div class="td">D</div>
            <div class="td">E</div>
        </form>        
    </div>
</body>

CSS

.table {width:600px;
            display:table;
        }

        .tr{
            display: table-row;
        }
.th{width:20%}
        .td, .th {
            display: table-cell;
        }

input.td,.td input{display:table-cell;}