Should the Div be the same width as the previous (or inside) Div - without Javascript?

Question

My example only works with javascript string from jQuery.

http://jsfiddle.net/TFLMX/4/

When I change the html of the center of the class to

div class="center">Here is</div> 

the pink div gets the width of the center, but is this possible without javascript?
Maybe the smaller div should be in the center of the div? Thanks!

Everything goes wrong here: http://jsfiddle.net/TFLMX/10/

the div "less" must at any moment have the same dynamic width as the "center".
But the text in the "smaller" should get a wrapper word if it gets small in order to display the text on one line.

Answer 1

I used this logic and it works the way I want:

max-width+padding+margin second div < min-width+padding+margin previous div

 .smaller { background: pink; padding: 10px; line-height: 1.5em; max-width:100px; margin:0 5px; } 

Working DEMO