title: CSS to stretch span to height of container
body: <p>I've set two span elements side by side with a separating border being applied to one of the spans. The problem occurs when one span has more lines than the other. If the span with less content is the one which has the border applied to it, the border doesn't stretch to the bottom of the container. </p>
  
  <p>I've tried adding height and min-height elements to the span, the containing div, the HTML and body tags in various combinations with no success.</p>
  
  <p>Here is the sample HTML:</p>
  
  <pre><code>&lt;div class="newspecs"&gt;
      &lt;div class="ns_row_type_2"&gt;
          &lt;span class="ns_field_name"&gt;Flash Exposure Compensation&lt;/span&gt;
          &lt;span class="ns_field_value"&gt;+/- EV&lt;br&gt;more text&lt;br&gt;more text&lt;br&gt;more text&lt;br&gt;more text&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the applicable CSS:</p>
  
  <pre><code>.newspecs div {
      display: block;
      clear: both;
  }
  .newspecs span {
      display: inline-block;
      vertical-align: top;
  }
  .ns_row_type_1,
  .ns_row_type_2 {
      border-bottom: 1px solid #fff;
  }
  .ns_row_type_1 {
      background-color: #ccc;
  }
  .ns_field_name {
      width: 100px;
      padding: 3px;
      border-right: 1px solid #fff;
  }
  .ns_field_value {
      width: 280px;
      padding: 3px;
  }
  </code></pre>
  
  <p>The full CSS and HTML is at:</p>
  
  <p><a href="http://yazminmedia.com/clients/IR/test.htm" rel="nofollow">http://yazminmedia.com/clients/IR/test.htm</a></p>
  
  <p>Anyone have an idea of what is going on?</p>
  
  <p>Thanks!</p>