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: