title: DL like a table
body: <p>I have the following <code>DL</code> in a container that is 300px wide.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  dl {width: 300px}
  dt {
    float:left;
    clear: left;
    width: 70px;
  }
  &lt;/style&gt;
  &lt;dl&gt;
    &lt;dt&gt;Row1&lt;/dt&gt;
    &lt;dd&gt;Value1&lt;/dd&gt;
    &lt;dt&gt;Row2&lt;/dt&gt;
    &lt;dd&gt;Value2&lt;/dd&gt;
    &lt;dt&gt;Row3 with longer title requiring line breaks&lt;/dt&gt;
    &lt;dd&gt;Value 3&lt;/dd&gt;
    &lt;dt&gt;Row4&lt;/dt&gt;
    &lt;dd&gt;Value4&lt;/dd&gt;
    &lt;dt&gt;Row5&lt;/dt&gt;
    &lt;dd&gt;Value5.1&lt;/dd&gt;
    &lt;dd&gt;Value5.2&lt;/dd&gt;
    &lt;dt&gt;Row6&lt;/dt&gt;
    &lt;dd&gt;Value6.1&lt;/dd&gt;
    &lt;dd&gt;Value6.1&lt;/dd&gt;
    &lt;dd&gt;Value6.1&lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>How can I align the items to look like a table, i.e.:</p>
  
  <ul>
  <li>Have <code>DT</code> in the left column and the <code>DD</code>s in the right column </li>
  <li>rowX and valueX top-aligned</li>
  <li>Multiple <code>DD</code>s  (for one <code>DT</code>) listed beneath each other</li>
  </ul>
  
  <p>I found multiple related questions <a href="https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line">here</a>, <a href="https://stackoverflow.com/questions/3284539/display-dl-like-a-table">here</a> and <a href="https://stackoverflow.com/questions/13708788/showing-definition-list-with-dt-and-dd-on-same-row">here</a>, but with neither I managed to top-align the different situation (<code>DT</code> being higher than <code>DD</code>, multiple <code>DD</code>s being higher than <code>DT</code>).</p>