<input type="radio" name="flex" id="space-between-middle" checked><label for="space-between-middle">between-middle(Default)</label>
	<input type="radio" name="flex" id="space-between"><label for="space-between">between</label>
	<input type="radio" name="flex" id="space-around"><label for="space-around">around</label>
	<input type="radio" name="flex" id="space-around-middle"><label for="space-around">around-middle</label>
	<input type="radio" name="flex" id="flex-start"><label for="flex-start">start</label>
	<input type="radio" name="flex" id="flex-start-middle"><label for="flex-start">start-middle</label>
	<input type="radio" name="flex" id="center"><label for="center">center</label>
	<input type="radio" name="flex" id="center-middle"><label for="center">center-middle</label>
	<input type="radio" name="flex" id="flex-end"><label for="flex-end">end</label>
	<input type="radio" name="flex" id="flex-end-middle"><label for="flex-end">end-middle</label>
	<br><br>
	<div class="flex">
		<div class="flex-itm">
			Lorem ipsum dolor sit amet
		</div>
		<div class="flex-itm">
			Lorem ipsum dolor sit amet<br>
			Lorem ipsum dolor sit amet<br>
			Lorem ipsum dolor sit amet<br>
			Lorem ipsum dolor sit amet
		</div>
		<div class="flex-itm">
			<input name="searchword" id="mod-search-searchword0" maxlength="200"  class="inputbox search-query input-medium" type="search" placeholder="Search ..." />	
		</div>
	</div>
		body{ padding:1em; font-family:arial; }
		.flex {
			height: 120px;
			display: flex;
			background: #455a64;     padding: 5px;
		}
		.flex-itm {  border: dashed 1px #b0bec5;   font-size: 1rem;     color: #eee;     margin: 5px;     padding: 15px; height: auto; }
		#mod-search-searchword0{
			height: 24px;
			line-height: 24px;
			border-radius: 12px;
		}
		#space-between-middle:checked ~ .flex { justify-content: space-between; align-items: center;}
		#space-between:checked ~ .flex { justify-content: space-between; }
		#flex-start:checked ~ .flex {    justify-content: flex-start; }
		#flex-start-middle:checked ~ .flex {    justify-content: flex-start; align-items: center; }
		#flex-end:checked ~ .flex {      justify-content: flex-end; }
		#flex-end-middle:checked ~ .flex {      justify-content: flex-end; align-items: center; }
		#center:checked ~ .flex {        justify-content: center; }
		#center-middle:checked ~ .flex {        justify-content: center; align-items: center; }
		#space-around:checked ~ .flex {  justify-content: space-around; }
		#space-around-middle:checked ~ .flex {  justify-content: space-around; align-items: center; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.