JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#">
    <fieldset>
        <legend>Select some stuff</legend>
        <fieldset>
            <ol>
                <li><label for="inputs1">label 1</label><input type="checkbox" name="inputs[]" id="inputs1" /></li>
            <li><label for="inputs2">label 2</label><input type="checkbox" name="inputs[]" id="inputs2" /></li>
            <li><label for="inputs3">label 3</label><input type="checkbox" name="inputs[]" id="inputs3" /></li>
            <li><label for="inputs4">label 4</label><input type="checkbox" name="inputs[]" id="inputs4" /></li>
            <li><label for="inputs5">label 5</label><input type="checkbox" name="inputs[]" id="inputs5" /></li>
            <li><label for="inputs6">label 6</label><input type="checkbox" name="inputs[]" id="inputs6" /></li>
            <li><label for="inputs7">label 7</label><input type="checkbox" name="inputs[]" id="inputs7" /></li>
            <li><label for="inputs8">label 8</label><input type="checkbox" name="inputs[]" id="inputs8" /></li>
            <li><label for="inputs9">label 9</label><input type="checkbox" name="inputs[]" id="inputs9" /></li>
            <li><label for="inputs10">label 10</label><input type="checkbox" name="inputs[]" id="inputs10" /></li>
                <li><label for="inputs11">label 11</label><input type="checkbox" name="inputs[]" id="inputs11" /></li>
            </ol>
        </fieldset>
    </fieldset>
</form>

CSS

fieldset {
    width: 50%;
    margin: 0 auto 1em auto;
    position: relative;
    border: 1px solid #f90;
}

fieldset > fieldset {
    width: 100%;
    position: absolute;
    left: -1px;
    display: none;
}

fieldset:hover > fieldset,
fieldset > fieldset:hover {
    display: block;
}

fieldset > fieldset > ol li {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
    width: 6em;
}