JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<form>
    <fieldset id="contactinfo">
        <legend>Contact Info</legend>
        <div class="control-group">
            <label>First</label>
            <input type="text" name="fname" />
        </div>
        <div class="control-group">
            <label>Last</label>
            <input type="text" name="lname" />
        </div>
        <div class="control-group">
            <label>Email</label>
            <input type="text" name="email" />
        </div>
    </fieldset>
</form>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.control-group {
    overflow: hidden;
    margin-bottom: 5px;
}
label {
    width: 10%;
    padding: 4px 0;
    margin-right: 15px;
    float: left;
    text-align: right;
}
input {
    float: left;
    margin: 0;
    padding: 4px 6px;
}