JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:absolute; border:1px solid blue;">
    <div style="float:left; border:1px solid red; width:50px; height:100px;">
        div1 has fixed width
    </div>
    <div style="float:left; border:1px solid green;width:50px; height:100px;">
        div2 may or may not exist
    </div>
    <div style="float:right; border:1px solid green;width:300px; height:100px;">
        div3 - This div should take the remaining width whether div2 exists or not. (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here) (More text goes here)
    </div>
</div>