JSFiddle - React, Tailwind, and code Playground

HTML

<div id='div_left'>
           Variable-width (click to widen)
        </div>
        <div id='div_right'>
             Variable-width (click to widen)
        </div>
        <div id='div_middle'>
            This div should to accomodate unused space This div should to accomodate unused sace eThis div should to accomodate unused space This div should to accomodate unused space
        </div>

CSS

body{
 font-weight:bold;   
}
#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
    min-width:220px;
}

JavaScript

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
    });
    $('#div_left').click(function() {
        $(this).append('--');
    });
});