JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1<br>Extra text here</div>
            <div id="col2">Column 2</div>
        </div>
    </div>
</div>

CSS

#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}