Edit in JSFiddle

<b>flex-grow:</b>
<input type="radio" name="flex" id="one" checked><label for="one">0 0 0 0</label>

<input type="radio" name="flex" id="two"><label for="two">1 0 0 0</label>

<input type="radio" name="flex" id="three"><label for="three">1 2 0 0</label>

<input type="radio" name="flex" id="four"><label for="four">1 1 1 1</label>

<input type="radio" name="flex" id="five"><label for="five">1 1 3 1</label>

<br><br>

<div class="flex">
    <div class="itm itm1">1</div>
    <div class="itm itm2">2</div>
    <div class="itm itm3">3</div>
    <div class="itm itm4">4</div>
</div>
body{ padding:1em; font-family:arial; }
input{ display:none; }
label{ padding:.2em .5em; }
label:hover{ background:#ccc; cursor:pointer; }
input:checked + label{ font-weight:bold; background:#ccc; }

.flex {
    display: flex;
    justify-content: center;
	
	background: #9ba5b3; padding: 5px;
}
.itm {     background: #2e5b61;     font-size: 2.5rem;     color: #eee;     margin: 5px;     padding: 15px; }

#two:checked ~ .flex .itm1{ flex-grow: 1; }

#three:checked ~ .flex .itm1{ flex-grow: 1; }
#three:checked ~ .flex .itm2{ flex-grow: 2; }

#four:checked ~ .flex .itm1{ flex-grow: 1; }
#four:checked ~ .flex .itm2{ flex-grow: 1; }
#four:checked ~ .flex .itm3{ flex-grow: 1; }
#four:checked ~ .flex .itm4{ flex-grow: 1; }

#five:checked ~ .flex .itm1{ flex-grow: 1; }
#five:checked ~ .flex .itm2{ flex-grow: 1; }
#five:checked ~ .flex .itm3{ flex-grow: 3; }
#five:checked ~ .flex .itm4{ flex-grow: 1; }