JSFiddle - React, Tailwind, and code Playground

HTML

<form class="select-extra" action="">
  <h3>Main</h3>
  <input class="control None  " type="radio" name="category" value="None" checked> None<br>
  <input class="control First " type="radio" name="category" value="First" > First<br>
  <input class="control Second" type="radio" name="category" value="Second"> Second<br>
  <input class="control Third " type="radio" name="category" value="Third" > Third<br>
  <input class="control Forth " type="radio" name="category" value="Forth" > Forth<br>
    <h3>Additional</h3>
    <div class="mod First "><input type="checkbox" name="category" value="First" > First  <br></div>
    <div class="mod Second"><input type="checkbox" name="category" value="Second"> Second<br></div>
    <div class="mod Third "><input type="checkbox" name="category" value="Third" > Third  <br></div>
    <div class="mod Forth "><input type="checkbox" name="category" value="Forth" > Forth  <br></div>
  </form>

CSS

.mod.First  {display: initial;} .control.First:checked  ~ .First  {display: none;}
.mod.Second {display: initial;} .control.Second:checked ~ .Second {display: none;}
.mod.Third  {display: initial;} .control.Third:checked  ~ .Third  {display: none;}
.mod.Forth  {display: initial;} .control.Forth:checked  ~ .Forth  {display: none;}
.select-extra {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    padding:50px;
}

h3 {
    -webkit-margin-after: 0;
    -webkit-margin-before: 0;
    -webkit-margin-end: 0;
    -webkit-margin-start: 0;
}
h3 {padding: 20px 0; }