JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div id="rlpContactForm">
    <label>First Name:</label>
    <input type="text" ID="txtFName" />
    <label>Last Name:</label>
    <input type="text" ID="txtLName" />
    <label>E-mail:</label>
    <input type="text" ID="txtEmail" />
    <label>Phone:</label>
    <input type="text" ID="txtPhone" />
    <label>Children's Ages:</label>
    <input type="text" ID="txtAge1" class="age" />
    <input type="text" ID="txtAge2" class="age" />
    <input type="text" ID="txtAge3" class="age" />
    <div class="submit">
        <input type="submit" ID="btnSubmit" Value="Submit" />
    </div>Thank you for your interest. A team member will contact you shortly.</div>

CSS

#rlpContactForm {
    width:275px;
}
#rlpContactForm label {
    display:block;
    float:left;
    width:112px;
    text-align:right;
    font-weight:bold;
}
#rlpContactForm input {
    float:left;
    margin:0 0 5px 5px;
}
#rlpContactForm input[type="text"] {
    border: 1px solid #999999;
}
#rlpContactForm input[type="text"] {
    width: 146px;
    /*175 available - total width of label (including margins/borders/10pxwiggle room)*/
    padding: 1px 0px 1px 0px;
    /* Otherwise IE adds 1px right and left padding automatically */
}
#rlpContactForm input[type="text"].age {
    width: 44px;
    /* Sized for 3 boxes to fit 1 line */
    margin: 0 0 5px 5px;
    text-align:center;
}
#rlpContactForm .submit {
    float:none;
    clear:both;
    width:100%;
    text-align:center;
}

#rlpContactForm .submit input {
    float:none;
}
}