Lining list items in two side unordered lists

Question

I am trying to align list items together in two unordered lists side by side:

list element 1     list element 1
list element 2     list element 2
list element 3     list element 3 that
                   wraps
list element 4     list element 4

right now the list on the left will not be wrapped by the list on the right, instead it shows

list element 1     list element 1
list element 2     list element 2
list element 3     list element 3 that
list element 4     wraps
                   list element 4

How can I build them correctly? right now i have this setting:

CSS

.col {float:left;width:150px;}

HTML

<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>
<div class="col">
  <ul>
    <li> list element </li>
  </ul>
</div>

thank

Answer 1

, , HTML. , , , , . , , , <table> .

- <table>. CSS . , , . . , , ! CSS, . ? , , , .

<ul> , <table>. , , . , , , , javascript .

, , height li. li , . , , , li3 . - jQuery HTML li3 li3s. jQuery , . HTML .

Answer 2

-

<table>
    <tr>
        <td class="col">
              <ul>
                <li> list element </li>
              </ul>
        </td>

        <td class="col">
              <ul>
                    <li> list element </li>
              </ul>
        </td>
    </tr>
</table>