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 must be given to the left div. As much text as possible should be displayed in the left div up to the point where ellipsis is used in case of overflow.
3. The right div's text should be right aligned. In the case of overflow, ellipsis should be used.
4. Text is dynamic, so no percentages or fixed widths can be used.
5. Only needs to work on webkit based browser, so CSS3 solution is preferred.

Here are some sample images of how it would look:

Input

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>

Output

Input

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>

Output

Input

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>

Output

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:

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

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:

Answer 2

Except the container width That can be defined in % here's a solution. The only crack that worked was putting container backgroud as that of child one.

or else the last condition is really hard to achieve :) Just being True.

Here's the fiddle link

width fiddle

Here's the css

.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

See to it if it fits . Last condition really tough if some one has another solution to the last image you pasted then please share :)