JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <p>Styled:</p>
    <ul class="tel-tabular">
        <li>
            <label>Field 1:</label>
            <input>
            <label>Field 2:</label>
            <input>
        </li>
        <li>
            <label>State</label> <span><span>
            <input class="tel-state">
            <label>Zip</label><input class="tel-zip">
          </span></span> <span>&nbsp;</span>
 <span>Another cell</span>

        </li>
        <li class="tel-fieldset">
            <div class="tel-legend">
                <div>Legend</div>
            </div>
            <div>
                <label>Longer label:</label>
                <input>
                <label>Field 4:</label>
                <input>
            </div>
            <div> <span>&nbsp;</span><span><span>
              <input type="checkbox"><label>Checkbox with a long label</label>
            </span></span> <span>&nbsp;</span>
 <span>&nbsp;</span>

            </div>
        </li>
        <li>
            <label>Field 7:</label>
            <input>
            <label>Field 8:</label>
            <input>
        </li>
    </ul>
</form>
<hr>
    <p>Unstyled:</p>
<form>
    <ul>
        <li>
            <label>Field 1:</label>
            <input>
            <label>Field 2:</label>
            <input>
        </li>
        <li>
            <label>State</label> <span><span>
            <input>
            <label>Zip</label><input>
          </span></span> <span>&nbsp;</span>
 <span>Another cell</span>

        </li>
        <li>
            <div>
                <div>Legend</div>
            </div>
            <div>
                <label>Longer label:</label>
                <input>
                <label>Field 4:</label>
                <input>
            </div>
            <div> <span>&nbsp;</span><span><span>
              <input type="checkbox"><label>Checkbox with a long label</label>
            </span></span> <span>&nbsp;</span>
 <span>&nbsp;</span>

            </div>
        </li>
        <li>
...

CSS

/* Basic tabular structure */
 .tel-tabular > div, .tel-tabular > li {
    display: table-row-group;
}
.tel-tabular > div > input, .tel-tabular > div > label, .tel-tabular > div > span, .tel-tabular > li > input, .tel-tabular > li > label, .tel-tabular > li > span {
    display: table-cell;
    padding-right: 0.3em;
}
.tel-tabular input {
    margin-right: 1em;
}
.tel-tabular label {
    text-align: right;
}
/* Extended cells */
 .tel-tabular > div > span > span, .tel-tabular > li > span > span {
    display: inline-block;
    width: 0;
    white-space: nowrap;
}
/* Short fields example */
 .tel-tabular .tel-state {
    /* Prefix is necessary to override universal selectors */
    width: 2em;
    margin-left: 0.2em;
    margin-right: 0.3em;
}
.tel-tabular .tel-zip {
    width: 5em;
}
/* Mock fieldsets */
 .tel-tabular {
    border-collapse: collapse;
}
.tel-fieldset {
    border: 1px solid;
}
.tel-fieldset > * {
    display: table-row;
    padding-right: 0;
}
.tel-fieldset > div > input, .tel-fieldset > div > label, .tel-fieldset > div > span {
    display: table-cell;
    white-space: inherit;
    padding-right: 0.3em;
    width: auto;
}
.tel-fieldset > div > span > span {
    display: inline-block;
    width: 0;
    white-space: nowrap;
}
.tel-legend {
    position: relative;
    display: block;
}
.tel-legend > div {
    position: absolute;
    top: -0.74em;
    left: 0.6em;
    display: block;
    background: white;
    padding: 0 0.3em;
    white-space: nowrap;
}
.tel-tabular label {
    padding-bottom: 0.7em;
    padding-top: 0.6em;
}
.tel-fieldset > div > label:first-child {
    padding-left: 0.3em;
}