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 class="clearfix">
    <label> foo </label>
    <input type="text" />
</div>
<div class="clearfix">
    <label> foo </label>
    <input type="text" />
</div>
</div>

CSS

input {
    height: 50px;
}

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

div {
    width: auto;
    height: auto;
    border: 1px solid green;
}

.clearfix:after {visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;}