CSS two columns dynamic width

I have a single-line div with content on the left and on the right:

---------------------------------------------------------------------------
|Single line of text                          Icon and single line of text|                                                
-------------------开发者_运维百科--------------------------------------------------------

If there is no enough space I want the right content to take the width it needs while the left content should take the rest of the available width (with overflow hidden to keep a single line).

The problem is that the content (left & right) is dynamic, so I do not know its width in advance.

Any hint? Thanks

Give this a whirl:

http://jsfiddle.net/thirtydot/fjJMX/191/

CSS:

#lineContainer {
    overflow: hidden; /* clear floats */
    outline: 1px solid red;
    width: 300px /* just to make demo easier */
}
#lineLeft {
    overflow: hidden; /* hide extra text */
    white-space: nowrap;
    background: #f0f

}
#lineRight {
    float: right;
    background: #ccc
}

HTML:

<div id="lineContainer">
    <div id="lineRight">right right right right right</div>
    <div id="lineLeft">left left left</div>
</div>

Float only one of the columns should work.

.left {
   float: left;
}
.right {
   overflow: hidden;
   padding-left: 20px;
}

See updated fiddle