Как я могу стилизовать список имени-значения парами, чтобы выглядеть как таблица 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>

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