JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div class="flexbox">
    <div class="box box1">child 1</div>
    <div class="box box2">child 2</div>
    <div class="box box3">child 3</div>
    <div class="box box4">child 4</div>
    <div class="box box5">child 5</div>
    <div class="box box6">child 6</div>
</div>

CSS

body {
	margin-left: 0px;
	margin-top: 0px;
}
.flexbox {
    background-color: yellow;    
    width: 100%;
    height: 800px;
}
.box {
    position:absolute; 
	width:50%;   
   }

.box1 {
    background-color: lime;
    height: 200px;
}
.box2 {
    background-color: blue;
    height: 150px;
}
.box3 {
    background-color: red;
    height: 230px;
}
.box4 {
    background-color: green;
    height: 80px;
}

.box5 {
    background-color: #454545;
    height: 160px;
}

.box6 {
    background-color: #222222;
    height: 180px;
}

JavaScript

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
	if (index % 2 === 0) //odd children (starts with 0 )
	{
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
	}
else //even children
	{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
	}	
});