JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="left"><div class="leftContent">a</div></div>
    <div class="right">b</div>
</div>

CSS

.box {
    display: table;
    position: relative;
    width: 90%;
    height: 200px;
    padding: 5px;
    background:lightcoral;
}

.left {
    /*position: absolute; /* ------ Get Rid of these lines */
    /*bottom: 5px;        /* ------ */
    /*width: auto;        /* ------ */
    overflow:hidden;
    vertical-align: bottom;
    display: table-cell;
    height: 20px;
    margin-left: 0; margin-right: 0;
    background: pink; /*or keep transparent*/
}

.leftContent {
    background: lightyellow; /* Take up rest of space */
}
.right {
    /*float: right;*/
    width: 100px;
    /*height: 100%;*/
    display: table-cell;
    background: lightblue;
}