JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="flex2" id="jc1" checked> <label for="jc1">top</label>
<br>
<input type="radio" name="flex2" id="jc2"> <label for="jc2">bottom</label>
<br><br>

<div class="flex">
    <div class="flex-itm" style="height:16px" id="id1">1</div>
    <div class="flex-itm">2</div>
    <div class="flex-itm">3</div>
    <div class="flex-itm">4</div>
    <div class="flex-itm">5</div>
    <div class="flex-itm">6</div>
</div>

CSS

html,body{ min-height:400px; }
body{ padding:1em; font-family:arial; }

.flex {
	display: flex;
    width: 325px;
	background: #9ba5b3; padding: 5px;
  transition: all 1s ease 3s;
}
.flex-itm { background: #2e5b61;    font-size: 2.5rem;    color: #eee;    margin: 5px;    padding: 15px; }

.flex { flex-direction: column; height: 260px; }
.flex { flex-wrap: wrap; }


#jc1:checked ~ .flex #id1 { margin-top: 5px; transition: all 1s ease 0.2s;}
#jc2:checked ~ .flex #id1 { margin-top: 35px; transition: all 1s ease 0.2s;}