JSFiddle - React, Tailwind, and code Playground

by cizmazia

HTML

<form action="Submit" method="post">
<p>
    <label>
        Sex
        <select id="sex">
          <option value="M">Male</option>
        </select>
    </label><label>
        Date of Birth
        <input id="date" type="text" value="Date of Birth" />
    </label>
</p>
</form>

<hr />

CSS

html { 
    font-size: 100%; /* IE hack */ 
}
body { 
    font-size: 0.625em; /* 10px = 0.625 * 16px (the default in most browsers) */
    line-height: 1.8em; /* 18px */
}
body, input, select, button {
    font-family: Helvetica,Arial,sans-serif;
}

label, button { 
    font-size: 1em; /* 10px */
    line-height: 1.8em;
}
label input, label select {
    font-size: 1.2em; /* 12px = 1.2 * 10px */
    border: 1px solid gray;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 8.333em; /* 100px = 8.333 * 12px */
}
label {
    line-height: 3.6em; /* 36px = 3.6 * 10px */
    display: inline-block;
    width: 20em; /* 200px = 20 * 10px */
    text-align: right;
}

form {
    z-index: 1;
    width: 40em;
}
hr {
    border: none;
    border-bottom: 1px solid lightblue;
    margin: -1.5em 0 0;
}
select, input, label, p {
    background: transparent;
    margin: 0;
}