JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<form>
    <div>
        <input id="chk1" type="checkbox" />
        <label for="chk1">Mobile</label>
    </div>
    <div>
        <input id="chk2" type="checkbox" />
        <label for="chk2">Animated</label>
    </div>
    <div>
        <label for="txt1">Input 1:</label>
        <input id="txt1" type="text" />
    </div>
    <div>
        <label for="txt2">Input 2:</label>
        <input id="txt2" type="text" />
    </div>
    <div>
        <label for="txt3">Input 3:</label>
        <input id="txt3" type="text" />
    </div>
    <div>
        <label for="txt4">Input 4:</label>
        <input id="txt4" type="text" />
    </div>
    <div>
        <label for="txt5">Input 5:</label>
        <input id="txt5" type="text" />
    </div>
    <div>
        <label for="txt6">Input 6:</label>
        <input id="txt6" type="text" />
    </div>
</form>

CSS

* { box-sizing: border-box; }
form{
    -webkit-column-count: 2;
    column-count: 2;
}

form > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;   
}

form label, form input {
    display: inline-block;
    margin: 4px 0px;
}
form input[type=text] {
    width: 50%;
}