JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="field">
        <label for="in1">Label</label>
        <div><input type="text" id="in1" /></div>
    </div>
    <div class="field">
        <label for="in2">Label</label>
        <div><input type="text" id="in2"></div>
    </div>
    <div class="field">
        <label for="in3">Label</label>
        <div><input type="text" id="in3"></div>
    </div>
</div>

CSS

.container {
    padding: 20px;
    background: #999;
    overflow: hidden; /* for float containment */
}

.field {
    padding: 4px;
    background: #fff;
    border: 2px solid #999;
    width: 33%;
    float: left;
    -webkit-box-sizing: border-box; /* 33% effective width */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    float: left;
    width: 100px; /* fixed width of label */ 
}

.field div {
    overflow: hidden; /* create a new Block Formatting Context */ 
}

/* inputs fill the new BFC */
input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}