fill out white space with a line

Question

How can I create a underline that fills up the white space between the end of a text line and the end of a DIV's width.

I'm trying the following:

I want the product line to break when the screen gets smaller. I want the price to stay lined out to the right and be underlined. The white space between the last word (Mayo) and the price must automatically be filled with a underline.

Big screen:
Old Cheese – Salad, Avocado, Egg, Herbal Mayo......................500

Smaller screen:
Old Cheese – Salad, Avocado, Egg,
Herbal Mayo..........................................500

Extra small screen:
Old Cheese – Salad,
Avocado, Egg, Herbal
Mayo...........................500

I have the following markup:

HTML

<div class="productline">
  <div class="product">
    Old Cheese – Salad, Avocado, Egg, Herbal Mayo
  </div>
  <div class="line">&nbsp</div>
  <div class="price">500</div>
</div>

CSS

.productline {
    width:300px;
}
.product {
    display:table-cell;    
    white-space: nowrap;
}
.line {
    border-bottom: 1px solid black;
    display: table-cell;
    width:100%;
}
.price {
    border-bottom:1px solid black;
    display: table-cell;
    white-space: nowrap;
    vertical-align:bottom;
}

Example

http://jsfiddle.net/florisvl/zV6Yd/

FIX

http://jsfiddle.net/florisvl/3b7Tr/

Answer 1

It's a bit of a trick, but it works (at least tested in FF):

http://jsfiddle.net/dVtCc/

HTML:

<table>
    <tr>
        <td>
            <span>
                Old Cheese – Salad, Avocado, Egg, Herbal Mayo
            </span>
        </td>
        <td class="price">
            <span>
                500
            </span>
        </td>
    </tr>
</table>

CSS:

table{
    border-collapse: collapse;
    width: 100%;
}

td{
    border-bottom: 3px dotted black;
    vertical-align: bottom;
    padding: 0;
}

td.price{
    text-align: right;
}

td > span{
    background-color: white;
    position: relative;
    bottom: -5px;
}

The tricks is that the dotted border actually spans the entire bottom of the row, but the spans are positioned to cover up the border directly below them.