JSFiddle - React, Tailwind, and code Playground

HTML

<p> Works but no floats :( </p>
<div id="work">
<div>
    <label> foo </label>
    <input type="text" />
</div>
<div>
    <label> foo </label>
    <input type="text" />
</div>
</div>
<p> Floats but no works </p>
<div id="nowork">
<div>
    <label> foo </label>
    <input type="text" />
</div>
<div>
    <label> foo </label>
    <input type="text" />
</div>
</div>

CSS

input {
    height: 50px;
}

#nowork input {
    float: right;    
    clear: right;
}

div {
    width: auto;
    height: auto;
}