JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.divinline {
    display:inline-block;
}
.container {
     color:#FFF;
    height:60px;
    background:#ffee12;
    width:50%;
    text-align:left;
}
.row1 {
    background:#450011;
    font-size:12px;
    height:60%;
    vertical-align: bottom;
    overflow:hidden;
}
.row2 {
    background:#333333;
    font-size:12px;
    height:40%;
   
}
.row1:before, .row2:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}