CSS divs inside fieldset

Question

I am trying to create a fieldset with divs inside. I have a 1px border-bottom on each div but it doesn't show.

.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;
}

<fieldset class="ben-row taxC">
  <h2 class="section-title">Tell us about your income…</h2>
  <div class="debt_row_odd">
    <div class="lbl-row">
      <label for="status">Are you single or a couple?</label>
    </div>
    <div class="input-container">
      <select name="status" id="status" class="text">
        <option value="1">Single</option>
        <option value="2">Couple</option>
      </select>
    </div>

  </div>
  <div class="debt_row_odd">
    <div class="lbl-row">
      <label for="work">How many hours do <strong>you</strong> work per week?</label>
    </div>
    <div class="input-container">
      <select name="how_many_hours_do_you_work" id="work" class="text">
        <option value="1">Not working</option>
        <option value="2">8 to 15 hours</option>
        <option value="3">16 to 23 hours</option>
        <option value="4">24 to 29 hours</option>
        <option value="5">30 or more</option>
      </select>
    </div>
  </div>
</fieldset>

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?

External link

Answer 1

change this: display:inline-table;