Shrink-wrap two elements- left one on one line, the second wrapped to fit remaining width

Question

I would like to organize my articles so the title fit in a box, almost as indentation underneath the publisher.. It works if i set max width to 300px; but i don't want the width to be defined- It should fit the remaining width.

-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-PUPLISHER-----TITLE-fits remaining||
|||____________||width, text wrapped|||
||              |___________________|||
||___________________________________||
|_____________________________________|

It works if i set max width to 300px; but i don't want the width to be defined- It should fit the remaining width.

 <div>
     <span style="display: inline-block;">
    content: one line no wrap, Stretches to fit text length;
     </span>
     <div style=" display: inline-block; max-width: 300px; " >
    content: block box, Stretches to fit remaining width, longer text is wrapped.
     </div>
 </div>

Answer 1

You may achieve this with the help of jQuery as follows,

$(function () {
var wrapperWidth = $('.wrapper').width();
$('.wrapper').children('.outer').each(function () {
    var mainWidth = $(this).children('.main').width();
    var sutraction = wrapperWidth - mainWidth - 4;
    // 4 is value of total border width i.e. blue and green border can be adjusted as per ur need
    $(this).children('.sub').css('width', sutraction);
});

});

http://jsfiddle.net/49Jpt/6/

Hope it helps!