JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div class="section">
<div class="table">
    <div class="tr">
        <div class="td">
            <input size="20" ID="txtName" placeholder="Name"/>
        </div>
        <div class="td">
            <input size="20" ID="txtValue" placeholder="Value"/>
        </div>
        <div class="td">
            <input size="20" ID="txtComment" placeholder="Comment"/>
        </div>
    </div>
</div>
</div>

CSS

div.section {
    min-width: 100%;
    background-color: aliceblue;
}
div.section div.table {
    display: table;
    width: auto;
    background-color: aliceblue;
    border-spacing: 5px;
}
div.section div.table div.tr {
    display: table-row;
    width: auto;
    clear: both;
    min-height: 20px;
    background-color: yellow;
}
div.section div.table div.tr div.td {
    display: table-cell;
    /*float: left;*/
    background-color: fuchsia;
}
div.tr div.td:not(:last-child) {
    margin-right: 5px;
}