JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container2">
    <div class="container1">
        <div class="col1">
            a<br />b<br />c
        </div>
        <div class="col2">
            a
        </div>
    </div>
</div>

CSS

.container2 {
	clear:left;
	float:left;
	width:100px;
	overflow:hidden;
	background:blue; /* column 2 background colour */
    color: white;
}
.container1 {
	float:left;
	width:100px;
	position:relative;
	right:50%;
	background:green; /* column 1 background colour */
    color: white;
}
.col1 {
	float:left;
	width:46%;
	position:relative;
	left:52%;
	overflow:hidden;
}
.col2 {
	float:left;
	width:46%;
	position:relative;
	left:56%;
	overflow:hidden;
}