<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; }