JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<form>
    <label>This: <input type="text" /></label>
    <label>This is long: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This is much longer than before: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
</form>

CSS

* { box-sizing: border-box; } 
form{
    -webkit-column-count: 2;
    column-count: 2;
}
label {
    display: block; margin: 2px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
input {
    border: 1px solid green;
    width: 50%;
}