JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

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

CSS

body{
 font-weight:bold;   
}
#div_left{
    float:left;
    border:1px solid #F00;
    width:140px;
}
#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('--');
    });
});