How to display text, a dotted line then more text spanning the width of the page?

Simple solution with no image

DEMO

Output :

This solution floats both texts and the dotted bottom border expands to the remaining width. Here is the relevant code :

HTML :

<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>

CSS :

div{
    height:1em;
}
.left,.right{
    padding:1px 0.5em;
    background:#fff;
    float:right;
}
.left{
    float:left;
    clear:both;
}
.dotted{
    border-bottom: 1px dotted grey;
    margin-bottom:2px;
}