JSFiddle - React, Tailwind, and code Playground

by hammerbrostime

HTML

<div class="parentFlexBox">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>

CSS

body {margin:0; font-family: sans-serif; font-weight:bold;}
.parentFlexBox { 
  background-color:grey;
  display: flex;
  flex-direction: column;
  margin-top:0; 
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height:100vh;
  width:100vw;
  
}
.itemA, .itemB, .itemC, .itemD { padding:5px; text-align:center; margin-bottom:5px; color:#fff;}
.itemA { background-color: red; width: 50px; order: 1; }
.itemB { background-color: hotpink; width: 150px; height: 50px; order: 2; }
.itemC { background-color:purple; width: 40px; height: 35px; order: 3; }
.itemD { background-color:blue; width: 80px; height: 30px; order: 5; }
.itemE { flex: 0 0 150px; visibility: hidden; border: 1px solid red; order: -1; margin-bottom: auto; }
.itemF { flex: 0 1 120px; visibility: hidden; border: 1px solid red; order: 4; margin-top: auto; }