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;
    font-size: 0px;
}

body > * {
  font-size: 16px;
}

#one {
    display: inline-block;
    height: 50%;
    width: 70%;
    background-color: red;
}
#ySpan {
    display: inline-block;
    font-size: 12px;
}
#two {
    display: inline-block;
    height: 50%;
    width: 30%;
    background-color: blue;
}
#three {
    display: inline-block;
    height: 50%;
    width: 60%;
    background-color: green;
}