Two single-line, fluid divs, in fixed container, one of them expanding

Question

I have a parent container and two divs:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

with the following CSS:

.container {
    max-width: 500px;
}
.left {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
    margin-right: 10px;
}

.right {
    font-weight: 900;
}

The left div contains a description of a task and the right div contains a timer. like so:

---------------------------------------------
|                  Fixing window frame|02:35|
---------------------------------------------

As the timer progresses it grows in size. So if the task description in the left div doesn't fit, it should fill the space it can and then end with ellipsis like so:

---------------------------------------------
|Working on garage door motor as...|10:15:50|
---------------------------------------------

---------------------------------------------
|Working on garage door ...|2 days, 12:45:10|
---------------------------------------------

All the text in both divs should be on the same line. How should I go about this? I don't care about old browser compatibility

Answer 1

You need to re-order your html

<div class="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

and change your .right css to

.right {
    float:right;
    font-weight: 900;
}

Demo at http://jsfiddle.net/gaby/d6H5H/1