css - Align two inline-block so that they remain on the same line -

i have situation in http://jsfiddle.net/paolobenve/gh577vg3/6/:

<div style="width: 100%;border: 3px solid #73ad21;">container div<br>   <span style="display: inline-block;            position:relative;            border:1px solid green;            width: 1em;">     t   </span>   <span style="display: inline-block;position:relative;border:1px solid green;">      asdfa sdf asdfa sdfa sdfa da da asd asdasdf adfa asfd      asd s sd asd fasdf asdf asd asdf asd asd asd sdsdf sdsdf asd      asd asd sdsdf sdsdf asd asd asd sdsdf sd sa   </span> </div>   

two consecutive inline-blocks, first has fixed width, second spans along remaining space.

if viewport width becomes narrower (or if text in second span becomes longer), second span tends occupy viewport width, , consecuently remains below first span.

i want second span remain @ right of first, independently of viewport width or text length.

is there way accomplish it?

perhaps if add max-width second span such style appear this:

span {   display: inline-block;   position:relative;   border: 1px solid green;   max-width: 50%;   word-wrap: break-word; } 

the max-width ensure second span won't expand beyond given figure. using percentage makes more dynamic/responsive use px. add max-width first span both have restrictions.

ps, word-wrap makes sure no words hang out of span (if happen have long word).