jquery - Two dynamicly sized divs side by side - second div determines size of second -

i have 2 divs side side. first div has random len text , second 1 has random number of divs inside.

i need these 2 divs fill space of wrapper , need first div starting overflow text when second 1 gets wider enough. point of when first div narrows can use jquery-textfill adapt font-size of text can fit inside.

here full example has buttons refresh random text , append square in wrapper.

jsfiddle

here html

<div id="wrapper">   <div id="left"></div>   <div id="right"></div> </div> 

here css

#wrapper{   width: 400px;   height: 50px;   background-color: lightgreen; }  #left{   float:left; }  #right{   float:right;   overflow: hidden; }  .square{   margin-left: 2px;   width: 50px;   height: 50px;   background-color: red;   float:right; } 

regards teamol

html:

<div id="wrapper">   <div id="right"></div>   <div id="left"></div> </div> 

css:

#wrapper{   width: 400px;   height: 50px;   background-color: lightgreen; }  #left{   background-color: yellow;   overflow: hidden; }  #right{   float:right;   background-color: blue; } 

updated jsfiddle