title: Style a definitition list as simple key value set
body: <p>I'd like to use a definition list as simple as:</p>
  
  <pre><code>&lt;dl&gt;
    &lt;dt&gt;name:&lt;/dt&gt;
    &lt;dd&gt;Tomas&lt;/dd&gt;
  
    &lt;dt&gt;address:&lt;/dt&gt;
    &lt;dd&gt;this is a very long wrapping address&lt;/dd&gt;
  
    &lt;dt&gt;age:&lt;dt&gt;
    &lt;dd&gt;29&lt;/dd&gt;
  &lt;dl&gt;
  </code></pre>
  
  <p>to render something like:</p>
  
  <pre><code>name: Tomas
  address: this is a very long
  wrapping address
  age: 29
  </code></pre>
  
  <p>The definition list seems semantically the best option here.</p>
  
  <p>Using the new run-in display style will do the trick:</p>
  
  <pre><code>&lt;style&gt; dt { display: run-in; } &lt;/style&gt;
  </code></pre>
  
  <p>But this isn't widely supported yet. How can I style my definition list for better cross-browser support (ie6 not necessary), without changing the html (currently I use display inline and add ugly br's) ? </p>
  
  <p>Edit to clarify : </p>
  
  <pre><code>dt { clear: left; }
  dd { float: left; }
  </code></pre>
  
  <p>won't work because it would render as:</p>
  
  <pre><code>name: Tomas
  address: this is a very long
           wrapping address
  age: 29
  </code></pre>
  
  <p>The design specifies that these multi-line field should wrap to the start of line to preserve space.</p>