JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">
    <span id="span">Text</span>
</div>
<div id="two">Text</div>
<div id="three">Text</div>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#one {
  float: left;
  height: 50%;
  width: 70%;
  background-color: red;
}
#two {
  float: left;
  display: inline-block;
  height: 50%;
  width: 30%;
  background-color: blue;
}
#three {
  float: left;
  display: inline-block;
  height: 50%;
  width: 60%;
  background-color: green;
}