I've been working on creating a fieldset with divs inside, but I'm facing an issue where the 1px border-bottom on each div is not showing up.
.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>Despite trying various solutions like adding a 1px clear div and tweaks to the border-sizing, the border-bottom is still not appearing. Even after inspecting the element, everything seems in place. What could be causing this behavior?