help converting this table to divs and css

This is drivi开发者_开发技巧ng me insane. how can i achieve the same effect like the table below but with divs and css.

<table>
    <tr>
        <td><label>label1</label></td>
        <td>foo</td>
    </tr>
    <tr>
        <td><label>label2</label></td>
        <td>bar</td>
    </tr>
</table>

EDIT

If foo or bar are long paragraphs they should not flow under the label column

---

Fixed width, floated labels are one way:

<p>
    <label style="width: 100px; float: left;">Label 1</label> Foo
</p>

<p>
    <label style="width: 100px; float: left;">Label 2</label> Bar
</p>

You could also discard the float property and use display: inline-block instead, but watch out for IE6.

---

<div style="width: 30%;">
   <div style="float: right;">
      <div>
          foo 
      </div>
      <div>
          bar
      </div>
   </div>

   <div style="float: left;">
      <div> 
         <label>label1</label>
      </div>
      <div>
         <label>label2</label>
      </div>
   </div>
</div>

You can view the output here: http://jsfiddle.net/Y7XZx/

---

HTML:

<ul>
    <li>
        <label> Label1 </label>
        Foo
    </li>
    <li>
        <label> Label2 </label>
        Bar
    </li>
</ul>

CSS:

label {
    display:inline-block;
    width:100px;
}

---

Live demo: http://jsfiddle.net/RFhur/1/

---

Styled live demo: http://jsfiddle.net/RFhur/2/

---

---

Here's a working example: http://jsfiddle.net/59GqN/.

It's complete overkill, but it seems to work. (I'd use tables if it takes me more than 20 minutes to figure out how to make it work without them. I do not promote them for site layout, though, but lay off the hate on the tables).

Good luck!