Same height li in multicolumn ul

I have created a muticolumn ul

The HTML:

<开发者_开发百科;ul>
   <li>Antelope</li>
   <li>Bison</li>
   <li>Camel</li>
   <li>Deer</li>
   <li>Eland</li>
   <li>Gazelle</li>
</ul>

The CSS:

 ul {
   float: left;
   width: 12em;
   margin: 0;
   padding: 0;
   list-style: none;
 }

 li {
   float: left;
   width: 6em;
   margin: 0;
   padding: 0;
 }

Now if I add some more text in second li (or any li in second column) the whole row automatically resizes (height of row resizes). But if I add more text in first li (or any li in first column), whole row does not resize.

I want whole row to be resized if text is added or reduced in any li.

I copied above code from this link. You can see how multiple column ul works

Maybe add:

li:nth-child(odd){clear:left;}

to your CSS?

(This assumes you'll only ever want 2 columns)