JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  </div>

CSS

.main{width:200px;height:200px;overflow:hidden;border:1px solid black;}


/* Change .div1 min-height to see result */

.div1{width:100px;min-height:100px/*200px*/;float:left;background-color:green;}




.div2{width:100px;display:inline-block;height:100px;background-color:blue;}
.div3{width:100px;display:inline-block;height:100px;background-color:red;margin-top:-4px;}