<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.