Create table-like grid with CSS starting from a simple HTML list

Question

Is there any way in CSS to create this:

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------

from this:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

^{(the order of the elements is not that important)}

UPDATE

I need 'columns' to be as wide as their widest 'cell'; and I need 'rows' to be as tall as their tallest 'cell'; in short... a table! There are no 'table headers': all cells are on the same level, hierarchically.

UPDATE 2

Something like: every cell on the first virtual row (i.e. every cell before the line wraps) fills all the available space based on in its contents; the subsequent rows are formed by the same number of cells per row as the first. Every column is still as wide as its widest cell, without increasing the number of columns established by the first row.

Thinking some more about it, the thing up there would require more magic than the table layout module, and that's too magic to begin with!

A picture, to say a thousand words:

^{(you can ignore the unordered lists inside the 'cells')}

How would you implement it with just a simple HTML list. At this point, I guess the anwser is: you wouldn't; but let's see...

Answer 1

A simple way is to use floats on your li elements. Below you'll find an example which you can edit to meet your needs.

ul {
  width: 500px;
}
li {
  width: 50%;
  float: left;
  border: 1px solid #000;
  margin: 0;
  list-style-type: none;
  box-sizing: border-box;
}
li:nth-child(odd) {
  clear: left;
}

<ul>
  <li>lorem ipsum dolor</li>
  <li>sit amet</li>
  <li>foo</li>
  <li>bar</li>
</ul>