title: DL Tag - Vertical align text in DT Tag, color background and have same height as DD Tag
body: <p>Given the following html &amp; CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>dl.table-display {
    float: left;
    width: 520px;
    margin: 1em 0;
    padding: 0;
    border-bottom: 1px solid #999;
  }
  
  .table-display dt {
    clear: left;
    float: left;
    width: 200px;
    margin: 0;
    padding: 5px;
    border-top: 1px solid #999;
    font-weight: bold;
    background-color: #cccccc;
  }
  
  .table-display dd {
    float: left;
    width: 300px;
    margin: 0;
    padding: 5px;
    border-top: 1px solid #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dl class="table-display"&gt;
    &lt;dt&gt;Key 1&lt;/dt&gt;
    &lt;dd&gt;Value 1&lt;/dd&gt;
    &lt;dt&gt;Key 2&lt;/dt&gt;
    &lt;dd&gt;Value 2&lt;br/&gt;With line breaks&lt;br/&gt;and line breaks&lt;/dd&gt;
  &lt;/dl&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to center the text in the DT &amp; DD tags and have the DT tag background color cover 100% of the longer DD tag. Create a .html file with the above code to see how it looks now. I did have this as a table but I am forced to use the DL markup now. Any help would be appreciated. Thanks!</p>