JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<h1>Label layout</h1>
<h2>Inline labels</h2>
<div class="inlineLabels">
    <label><span>Foo</span><input type="text" name="foo" /></label>
    <label><span>Bar</span><input type="text" name="bar" /></label>
    <label><span>Baz</span><input type="text" name="baz" /></label>
</div>
<h2>Split labels</h2>
<div class="splitLabels">
    <div>
        <label for="txtFooSplit">Foo</label>
        <input id="txtFooSplit" type="text" name="foo" />
    </div>
    <div>
        <label for="txtBarSplit">Bar</label>
        <input id="txtBarSplit" type="text" name="bar" />
    </div>
    <div>
        <label for="txtBazSplit">Baz</label>
        <input id="txtBazSplit" type="text" name="baz" />
    </div>
</div>
<h2>Table-based labels</h2>
<div class="tableLabels">
    <table>
        <tr>
            <td><label for="txtFooTable">Foo</label></td>
            <td><input id="txtFooTable" type="text" name="foo" /></td>
        </tr>
        <tr>
            <td><label for="txtBarTable">Bar</label></td>
            <td><input id="txtBarTable" type="text" name="bar" /></td>
        </tr>
        <tr>
            <td><label for="txtBazTable">Baz</label></td>
            <td><input id="txtBazTable" type="text" name="baz" /></td>
        </tr>
    </table>
</div>

CSS

.inlineLabels label { display: block; }
.inlineLabels label span {
    display: inline-block;
    padding-right: 8px;
    text-align: right;
    width: 64px;
}

.splitLabels label {
    display: inline-block;
    padding-right: 8px;
    text-align: right;
    width: 64px;
}

.tableLabels table { table-layout: fixed; }
.tableLabels td:first-child
{
    display: inline-block;
    padding-right: 8px;
    text-align: right;
    width: 64px;
}