CSS display-table + SPAN error

Question

I have this example: Fiddle link

A table using display: table, display: table-cell, display: table-row

I need add before <p> a <span> tag, but my table structure breaks.

Any idea? Thanks

Example:

<fieldset>
<span>
<p>
    <label>First Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Second Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Country: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
<span>
<p>
    <label>Age: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
</fieldset>

Answer 1

If you are going to display as a table then all elements should follow the same structural property's

fieldset span {
    display: table-row-group;
}

Fiddle: http://jsfiddle.net/qQ3xJ/

Answer 2

You're wrapping table-row elements (<p> tags in this case) by <span>. You could change the type of display of <span> elements to table-row-group:

fieldset span {
    display: table-row-group;
}

Here is the JSFiddle Demo

Answer 3

I would use a different structure like this: http://jsfiddle.net/7Kxf5/, with div or a ul list.

I don't think using span in this case would fit in a good practice.