how i <li> retard elements lay beside any other?

i have mockup plans something . radically there sections, columns fields, combined multiple <ul> <li> elements. finished personally after parsing.

a dash html:

<li class="layout"><span class="type">[column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[text] </span>a field</li>
        <li class="field"><span class="type">[text] </span>another field</li>
        <li class="field"><span class="type">[text] </span>yet another field</li>
    </ul>
</li>
<li class="layout"><span class="type">[column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[text] </span>more fields</li>
        <li class="field"><span class="type">[text] </span>and some-more field</li>
    </ul>
</li>

if you'll note those columns lay vertically.
i wish columns lay beside any other, nonetheless i am certain it.

it preferable html didn't change, only css.