Try this: http://jsfiddle.net/FpRp2/4/ (updated, now works in ie7)
The solution @Marcel gave to use a dashed border instead of text hyphens solved the final issue with IE7.
(Note, I’ve only tested in Safari, Firefox and Chrome so far.)
EDIT: IE8 works. Working on a fix for IE7.
HTML
<div class="outer">
<div class="container">
<div class="filler"></div>
<span class="label">some label</span>
<span class="text">some text</span>
</div>
<br>
<div class="container">
<div class="filler"></div>
<span class="label">some other label</span>
<span class="text">some other text</span>
</div>
</div>
CSS
.outer {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
clip: auto;
overflow: hidden;
}
.container {
position: relative;
text-align: right;
white-space: nowrap;
}
.filler {
position: absolute;
left: 0;
right: 0;
border-bottom: 1px dashed #333;
height: 50%;
}
.label {
background: white;
float: left;
margin-right: 20px;
padding-right: 4px;
position: relative;
}
.text {
background: white;
padding-left: 4px;
position: relative;
}