JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container divinline">
    <div class="row1 ">ROW ONE</div>
    <div class="row2">ROW TWO</div>
</div>

CSS

.divinline{
    display:inline-block;
}

.container{
	height:60px;
	background:#ffee12;
	width:50%;
    text-align:left;
}

.row1{
	background:#450011;
	font-size:12px;
	height:50%;

}

.row2{
	background:#333333;
	font-size:12px;
	height:50%;

	color:#FFF;

}
.row1:before, .row2:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}