<input type="radio" name="flex" id="f1" checked><label for="f1">1-1-1 (Default)</label>
<input type="radio" name="flex" id="f2"><label for="f2">2-1-1</label>
<input type="radio" name="flex" id="f4"><label for="f4">1-2-1</label>
<input type="radio" name="flex" id="f3"><label for="f3">1-1-2</label>
<input type="radio" name="flex" id="f0"><label for="fo">0-0-0</label>
<br><br>
<div class="flex">
<div class="itm itm1">
<strong>Element 1</strong> <br>
Lorem ipsum
</div>
<div class="itm itm2">
<strong>Element 2</strong><br>
Lorem ipsum
</div>
<div class="itm itm3">
<strong>Element 3</strong><br>
Lorem ipsum
</div>
</div>
body{ padding:1em; font-family:arial; }
.flex {
display: flex;
justify-content: center;
background: #263238;
padding: 5px;
}
.itm { background: #455a64; font-size: 1rem; color: #fff; margin: 5px; padding: 15px; }
#f1:checked ~ .flex .itm1{ flex: 1; }
#f1:checked ~ .flex .itm2{ flex: 1; }
#f1:checked ~ .flex .itm3{ flex: 1; }
#five:checked ~ .flex .itm1{ flex: 1; }
#five:checked ~ .flex .itm2{ flex: 1; }
#five:checked ~ .flex .itm3{ flex: 3; }
#f2:checked ~ .flex .itm1{ flex: 2; }
#f2:checked ~ .flex .itm2{ flex: 1; }
#f2:checked ~ .flex .itm3{ flex: 1; }
#f3:checked ~ .flex .itm1{ flex: 1; }
#f3:checked ~ .flex .itm2{ flex: 1; }
#f3:checked ~ .flex .itm3{ flex: 2; }
#f4:checked ~ .flex .itm1{ flex: 1; }
#f4:checked ~ .flex .itm2{ flex: 2; }
#f4:checked ~ .flex .itm3{ flex: 1; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.