Выравниваются как таблица, но с CSS?

Можно ли выровнять следующие 2 ряда, как таблица? Первый ряд - это H2 , потому что это название, а остальные являются спискими. Первый столбец должен быть довольно широкой, но остальные могут быть такими же широкими, как текст внутри. Столбцы должны заполнить ширину div .

<div>
<h2 class="header1">
<span class="span1">one</span>
<span class="span2">two</span>
<span class="span3">three</span>
<span class="span4">four</span>
</h2>
<ul><li>
<span class="span5">five</span>
<span class="span6">six</span>
<span class="span7">seven</span>
<span class="span8">eight</span>
</li></ul>
</div>

div {width: 500px;}
h2 span, li span {float: left; width: auto; white-space: nowrap;}

Пример: