JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="floating_div">
    <div class="inner_div blue_bg">Inner Div 1</div>
    <div class="inner_div yellow_bg m-t"> Inner DIv 2</div>
  </div>
  <div  class="floating_div green_bg ">
    Left Div 2
  </div>
</div>

CSS

.wrapper{
width: 100%;
padding: 15px;
height:100%;
}

.floating_div{
  margin:10px;
  float:left;
  width: 45%;
  height:200px;
  display:inline-block;
  vertical-align:top;
}

.m-t{
  margin-top:15px;
}

.blue_bg{
  background:blue;
}

.green_bg{
  background:green;
}

.yellow_bg{
  background:yellow;
}

.floating_div .inner_div{
  height:100px;
}