Horizontal Table With DataList And DIVs?

问题

I'm trying to create a table layout with headers on the left and horizontally aligned fields. (See mock-up below.) I'm trying to accomplish this using a DataList -- stuck with .NET 2.0 -- and wrapped in a div with a scrollbar on the x-axis so that if enough groups are visible, a scroll bar will appear.

               Group One      Group Two      Group Three
Header One      Value          Value          Value
Header Two      Value          Value          Value
Header Three    Value          Value          Value

I'm struggling with two points, both seen in the below code and jsFiddle.

How do I keep the #itm blocks in a single line without explicitly defining a width on the #wrapper?
- white-space: nowrap on #wrapper works here.
How do I keep a consistent height on rows, even if data should vertically expand its parent DIV?
- Setting an explicit height will work for me, given an approximate field length.

Original jsFiddle: http://jsfiddle.net/D6yXV/1/

Updated with fixes: http://jsfiddle.net/D6yXV/7/

HTML:

<div id="hdr">
    <label>Header One</label>
    <label>Header Two</label>
    <label class="highlight">Header Three</label>
    <label>Header Four</label>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Actually, this is a large field and could stretch the row out some.</span>
    <span>Even More Data</span>
</div>

<div id="itm">
    <span>Some Data</span>
    <span>More Data</span>
    <span class="highlight">Even More Data</span>
    <span>No More Data</span>
</div>

</div>

CSS:

#wrapper { overflow-x: auto; }
#hdr, #itm { display: inline-block; padding: 3px; width: 150px; }
#itm { border-left: solid 1px #000; }
#hdr label { font-weight: 700; display: block; }
#itm span { display: block; }
.highlight { background-color: #EEE; }