JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left-div">
    Left div<br>
    <img src="http://placehold.it/300x300/000/fff.png&text=IMG" />
</div>
<div class="right-div">
    <p>
        Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, Right Div, 
    </p>
</div>
<div style="clear:both;"></div>

CSS

.left-div {
    float: left;
    width:calc(50% - 5px);
    background-color:yellow;
    display:block;
    margin-right:10px;
    overflow:hidden;
}
.left-div img {width:100%;box-sizing:border-box;}

.right-div {
    float: left;
    background-color:blue;
    width:calc(50% - 5px);
    display:block;
    overflow:hidden;
}