JSFiddle - React, Tailwind, and code Playground

by Otobong Okoko

HTML

<div class="contained">
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[1]" />
    </div>
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[2]" />
    </div>
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[3]" />
    </div>
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[4]" />
    </div>
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[5]" />
    </div>
    <div class="wrapped">
        <label for="">label</label>
        <input type="text" placeholder="[6]" />
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.contained {
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}
.wrapped {
    overflow: hidden;
    padding: .5em;
}
.wrapped label {
    float: left;
    width: 50px;
}
.wrapped label + input {
    float: left;
    width: calc(100% - 50px);
}