JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset class="side-by-side" style="min-height: 12em">
<legend>Rule controls access to</legend>
<ol id="uid_4ae9bff884d1e6d8d0a268c64f6c5fae1386591702_6139_match-dn" style="width: 16em">
<li>
<div>
<input value="everything" id="rule_scope__type__1" name="rule[scope][type]" checked="checked" type="radio"> <label for="rule_scope__type__1">Everything</label> <input name="rule[scope][dn]" value="" type="hidden">
</div>
</li>
<li>
<div>
<input value="one" id="rule_scope__type__2" name="rule[scope][type]" type="radio"> <label for="rule_scope__type__2">Specific DN only</label>
</div>
</li>
<li>
<div>
<input value="children" id="rule_scope__type__3" name="rule[scope][type]" type="radio"> <label for="rule_scope__type__3">Immediate children of specific DN</label>
</div>
</li>
<li>
<div>
<input value="descendants" id="rule_scope__type__4" name="rule[scope][type]" type="radio"> <label for="rule_scope__type__4">All descendants of specific DN</label>
</div>
</li>
</ol>
<ol id="uid_4ae9bff884d1e6d8d0a268c64f6c5fae1386591702_6139_match-other">
<li>
<div>
<input id="__iid_2" value="1" name="ignore[]" type="checkbox"> <label for="__iid_2">Restrict scope to DNs that additionally match a filter</label>
</div>
</li>
<li>
<div>
<input id="__iid_3" value="1" name="ignore[]" type="checkbox"> <label for="__iid_3">Restrict scope to DNs that additionally have an attribute</label>
</div>
</li>
</ol>
</fieldset>
<fieldset>
<legend>[...more stuff...
CSS
ol, ul { list-style: none outside none; }
fieldset.side-by-side { overflow: hidden; background: yellow }
fieldset.side-by-side > legend + ol { padding-left: 0px; }
fieldset.side-by-side + * { clear: both }
fieldset.side-by-side ol
{
float: left;
vertical-align: top;
padding-right: 1em;
padding-bottom: 5000px;
margin-bottom: -5000px;
}
fieldset.side-by-side ol + ol { border-left: 2px red solid; padding-left: 1em; }