How do I make <li> with block elements sit beside each other?

Question

I have a mockup layout for something here. Essentially there are sections, columns and fields, which are all written as a combination of <ul> and <li> elements. This is done specifically for later parsing.

A snippet of the 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 one more field</li>
    </ul>
</li>

If you go to the linked content you'll note that those columns sit vertically. I want the columns to sit beside each other, but I am not sure how to go about it.

It would be preferable if the HTML didn't change, just the CSS.

Answer 1

I just added this to your css:

ul .section-children li.layout {
    display : inline-block;
}

Unfortunately, I don't know how well supported inline-block is nowadays.