JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div>
<input type="radio" name="level0" value="A" id="A"/>
<label for="A">First Set</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="A0" id="A0"/>
<label for="A0">First - Option 1</label>
</div>
<div>
<input type="radio" name="level1" value="A1" id="A1"/>
<label for="A1">First - Option 2</label>
</div>
<div>
<input type="radio" name="level1" value="A1" id="A1"/>
<label for="A1">First - Option 3</label>
</div>
</div>
</div>
<div>
<input type="radio" name="level0" value="B" id="B"/>
<label for="B">Second Set</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="B0" id="B0"/>
<label for="B0">Second - Option 1</label>
</div>
<div>
<input type="radio" name="level1" value="B1" id="B1"/>
<label for="B1">Second - Option 2</label>
</div>
</div>
</div>
<div>
<input type="radio" name="level0" value="C" id="C"/>
<label for="C">Third Set</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="C0" id="C0"/>
<label for="C0">Third - Option 1</label>
</div>
<div>
<input type="radio" name="level1" value="C1" id="C1"/>
<label for="C1">Third - Option 2</label>
</div>
</div>
</div>
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">Fourth Set</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">Fourth - Option 1</label>
</div>
<div>
...
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}http://jsfiddle.net/user/login/