JSFiddle - React, Tailwind, and code Playground

HTML

<div id='load'>
    <div id='secondaryOne' class="secondary"></div>
    <div id='secondaryTwo' class="secondary"></div>
    <div id='primary'></div>
</div>

CSS

#load {
    margin: 10px;
    height: 100%;
    min-width: 1080px;
}
#primary,#secondaryOne,#secondaryTwo {
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #ccc;
}
#primary {
    float: right;
    height: inherit;
    width: 100%;
    height:500px;
    background:red;
}
#secondaryOne + #primary, #secondaryTwo + #primary {
    margin-top: -221px;
    width: 75%;
}
#secondaryOne,#secondaryTwo {
    clear: left;
    float: left;
    height: 220px;
    margin-right: 10px;
    width: 20%;
}
#secondaryTwo {
    margin-top: 10px;
}