How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

Question

I\'m trying to place two div\'s beside each other with the following criteria:

1. Both divs must stay on the same line.
2. Priority mus

Answer 1

I have it with the exception that when there is empty space my right div is eating it (with text right aligned). You don't list that as an ask, so I was unsure if it was just how you drew it? Fiddle here: http://jsfiddle.net/mdares/fSCr6/

HTML:

    
Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: 
    
other Text ttt other Text tttother Text tttother Text ttt





    
Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,
    
other Text ttt other Text tttother Text tttother Text ttt





    
Some Text, Repeat, Repeat, Repeat, ,Some Text, 
    
other Text ttt

CSS:

.container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
}

And finally: