JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="left">&nbsp;</div>
    <div class="right">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
    <div style="clear:both;">
</div>

CSS

.main {
    width:100%;
    min-height:50px;
    border:1px solid red;
    position: relative;
}

.left {
    float:left;
    width:50px;
    height:100%;
    background-color:yellow;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    float:left;
    width:300px;
    border:1px solid green;
}