JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big-div">
  <div class="top">
    
  </div>
  <div class="bottom">
    <div class="vertical-invert">SOME TEXT</div>
    <div class="bottom-right"></div>
  </div>
  
</div>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.big-div{
  width:600px;
  height:600px;
  background:gray;
}
.top{
  float:right;
  height:30%;
  background:red;
  width:80%;
}
.bottom{
  width:100%;
  height:70%;
  background:green;
  float:right;
}
.bottom-right{
  float:left;
  height:100%;
  width:80%;
  background:pink;
}
.vertical-invert{
  width:20%;
  height:100%;
  background:blue;
}