title: CSS divs inside fieldset
body: <p>I am trying to create a fieldset with divs inside. I have a 1px border-bottom on each div but it doesn't show.</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>.debt_row_odd {
    display: table-row;
    width: 100%;
    background-color: #eef6f9;
    border-bottom: 1px dotted #ff0000;
  }
  
  .input-container {
    padding: 5px 10px;
    display: table-cell;
    float: right;
    width: 150px;
  }
  
  .content {
    max-width: 500px;
  }
  
  .lbl-row {
    display: table-cell;
    float: left;
    width: 310px;
    padding: 5px 10px;
    text-align: left;
    font-weight: normal;
    font-weight: bold;
    font-size: 12px;
  }
  
  .input-container select {
    width: 95%;
    display: block;
    line-height: 1.3;
    padding: .25em;
  }
  
  .content .text {
    padding: 0 0;
    height: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="ben-row taxC"&gt;
    &lt;h2 class="section-title"&gt;Tell us about your income…&lt;/h2&gt;
    &lt;div class="debt_row_odd"&gt;
      &lt;div class="lbl-row"&gt;
        &lt;label for="status"&gt;Are you single or a couple?&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="input-container"&gt;
        &lt;select name="status" id="status" class="text"&gt;
          &lt;option value="1"&gt;Single&lt;/option&gt;
          &lt;option value="2"&gt;Couple&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="debt_row_odd"&gt;
      &lt;div class="lbl-row"&gt;
        &lt;label for="work"&gt;How many hours do &lt;strong&gt;you&lt;/strong&gt; work per week?&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="input-container"&gt;
        &lt;select name="how_many_hours_do_you_work" id="work" class="text"&gt;
          &lt;option value="1"&gt;Not working&lt;/option&gt;
          &lt;option value="2"&gt;8 to 15 hours&lt;/option&gt;
          &lt;option value="3"&gt;16 to 23 hours&lt;/option&gt;
          &lt;option value="4"&gt;24 to 29 hours&lt;/option&gt;
          &lt;option value="5"&gt;30 or more&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have tried adding a 1px clear div, border-sizing, and a lot of other tweaks, but still no luck. When I inspect element, it doesn't look out of place. What causes that behaviour?</p>
  <p><a href="http://jsfiddle.net/LPa2f/1/" rel="nofollow noreferrer">External link</a></p>