Как я могу создать список пар имя-значение, чтобы он выглядел как таблица HTML?

Я унаследовал отчет о веб-формах, выложенный с использованием чистых элементов управления HTML и ASP.NET, а общий шаблон макета - это раздел, который выложен с использованием таблицы из четырех столбцов, с первым и третьим столбцами, используемыми для меток полей, и второй и четвертый столбцы для значений.

Поскольку мне было поручено "переучивание" отчета, я решил попробовать и улучшить семантику разметки и удалить все таблицы, не используемые для фактических табличных данных. После некоторых экспериментов с списками определений для пар имя-значение я остановился вместо этого на комбинации ol/li, но я не могу понять, как получить оба текстовых элемента внутри каждого li, чтобы занять 50% ширины всего элемента li.

Это css для списка:

ol.name-value
{
    list-style: none;
    display: table;
}

ol.name-value li {
    display: table-row;
    border-bottom: 1px solid #E8E8E8;
}

Это HTML:

<div class="span-12">
    <ol class="name-value" style="width: 100%;">
        <li>                    
            <label for="about">Client</label>
            <span id="about">Apartment Applied Visual Arts</span>
        </li>
        <li>
            <label for="about">Report Date</label>
            <span id="Span1">2011/08/08 16:50:10</span>
        </li>
        <li>
            <label for="about">Report No.</label>
            <span id="Span2">33251</span>
        </li>
    </ol>
</div>

И это то, что я получаю как результат. Раздел "Сведения о отчетах" представляет собой таблицу с двумя столбцами, где Детали отчета являются приведенным выше упорядоченным списком. Я пытаюсь получить список