JSFiddle - React, Tailwind, and code Playground

by basarat

HTML

<div class="left">
    <fieldset>
        <legend>First fieldset</legend>
        <div style="display:block;">field 1
            <input type="text" style="display:block;" />
        </div>
        <div style="display:block;">field 2
            <select style="display:block;">
                <option>field 2 options</option>
            </select>
        </div>
        <div style="display:block;">field 3
            <input type="text" style="display:block;" />
        </div>
    </fieldset>
</div>
<div class="right">
    <fieldset>
        <legend>Second fieldset</legend>
        <div style="clear:both"></div>
        <div class="one-half" style="display:inline-block; float:left;">
            <input type="radio" name="scoops" />Single
            <div style="display: block">Radio 1</div>
            <div style="display: inline">Radio 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Radio 3</div>
        </div>
        <div class="one-half" style="display:inline-block;">
            <input type="radio" name="scoops" />Double
            <div style="display: block">Blah 1</div>
            <div style="display: inline">Blah 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Blah 3</div>
        </div>
    </fieldset>
</div>

CSS

.left {
    display:inline-block;
    vertical-align:top;
    float:left;
    width:25%;
}
.right {
    display:inline-block;
    vertical-align:top;
    width:33%;
}