JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="left">
<div class="ac">
<div class="a">a</div>
<div class="c">c</div>
</div>
<div id="second" class="ac">
<div class="a">a</div>
<div class="c">c</div>
</div>
</div>
<div id="right">
<div class="b">b</div>
<div id="hidden"></div>
<div class="b">b</div>
</div>
</div>
CSS
#main {
width: 280px;
height: auto;
}
#left {
width: 150px;
float: left;
height: auto;
}
#right {
width: 100px;
height: auto;
margin-left: 30px;
float: left;
}
.ac {
height: 120px;
}
.a, .c {
height: 50px;
background-color: #3F86CE;
}
.c {
margin-top: 20px;
}
#second { // You also can do this, with pseudo selector :ntn-child;
margin-top: 150px;
}
.b {
height: 150px;
background-color: #3F86CE;
}
#hidden {
height: 150px;
background-color: #fff;
margin-top: 20px;
visibility: hidden;
}