JSFiddle - React, Tailwind, and code Playground

HTML

<label>1%</label>
<input type='radio' name='x' id='x1'>
<label>20%</label>
<input type='radio' name='x' id='x2'>
<form novalidate="">
<div class="item multi">
<label>xxxxx</label>
<div>yyy</div>
</div>
</form>

SCSS

form{ display:table; margin:3em 0 5em; border:1px solid red; border-spacing:5px;
            > .item{ display:table-row;
        > label{ transition:1s; }
                > *{ display:table-cell; border:1px solid green; }
            }      
}

#x1:checked ~ form label{ width:1%; }
#x2:checked ~ form label{ width:20%; }