JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

<form method="" action="" >
    <fieldset>
        <legend>Personal information:</legend>
        <div>
            <label for="firstname">First name:</label>
            <label for="middlename">Middle name:</label>
            <label for="lastname">Last name:</label>
            <label for="nick">What is your nick-name?</label>
        </div>
        <div>
            <span><input name="firstname" id="firstname" type="text" size="20" /></span>
            <span><input id="middlename" name="middlename" type="text" size="10" /></span>
            <span><input name="lastname" id="lastname" type="text" size="30" /></span>
            <span><input name="nick" id="nick" type="text" size="5" /></span>
        </div>
    </fieldset>
</form>

CSS

html, body, form, fieldset, legend, div, label, input {padding: 0; margin: 0;}
body {
    padding: 2em;
}
legend {
    padding-bottom: .5em;
}
div {
    float: left;
}
label {
    display: block;
    text-align: right;
    line-height: 2em;
}
span {
    display: block;
    line-height: 2em;
    margin-left: .5em;
}