<span> indent wrapped text - css

Question

So I'm simulating a table layout with a div and a couple spans inside it. I'd like the span on the right to indent any text that wraps. I've tried a few things and can't get it to work. Any help would be appreciated.
jsFiddle: http://jsfiddle.net/2Wbuv/
HTML
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>
CSS
.display-element {}
.display-label {display: inline-block;
width: 100px;
padding-left: 5px;}
.display-field {display: inline;}

Answer 1

Check this out: http://jsfiddle.net/2Wbuv/2/
.display-element {
}
.display-label {
display: inline-block;
width: 100px;
padding-left: 5px;
}
.display-field {
display: inline-block;
padding-left: 50px;
text-indent: -50px;
vertical-align: top;
width: 200px; /* for testing purposes only */
}
<div class="display-element">
<span class="display-label">Field 1</span>
<span class="display-field">This is my string of data, some times it is pretty long. Sometimes it is not. This one is.</span>
</div>
<div class="display-element">
<span class="display-label">Field 2</span>
<span class="display-field">This is another string of data.</span>
</div>

Answer 2

It sounds like you want a hanging indent. CSS something like this should do the trick:
.hanging-indent
{
text-indent : -3em ;
margin-left : 3em ;
}
But since your <span> is an inline element, the text-indent property, as well as other CSS properties pertaining to a block, is meaningless.

Answer 3

The CSS 3 draft specifies a hanging indent. If supported by Browsers, the following should work:
.hanging-indent
{
text-indent: 3em hanging each-line;
}
Unfortunately neither hanging nor each-line values are currently supported in modern browsers as the specification for CSS Text Module Level 3 is still a Draft.
The feature is implemented with a browser specific prefix for WebKit and Chromium. For Firefox there is an open Bug you may vote on.