CSS table-row not expanding 100% inside table-cell - html

Question

I'm creating a widget with a tabular structure and I'm not seeing why the two rows on the right are not expanding to full width (or why they don't have a red border around them).
My goal is for the black horizontal rule to run between rows 1 and 2 and reach the far right end of the entire table.
Demo Fiddle
.table {
display: table;
width: 100%;
white-space: nowrap;
border: 1px solid blue;
}
#cell1 {
display: table-cell;
padding-left: 30px;
border: 1px dashed orange;
}
#cell1 > #line1 {
display: inline-block;
font-size: 16px;
padding-top: 5px;
border: 1px solid red;
}
#cell1 > #line2 {
display: inline-block;
font-size: 30px;
border: 1px solid red;
}
#cell1 > #line3 {
display: inline-block;
padding-right: 20px;
border: 1px solid red;
}
#cell2 {
display: block;
width: 100%;
border: 1px dashed orange;
}
#cell2 > #topRow {
display: table-row;
width: 100%;
border: 1px solid red;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid black; // horizontal rule
}
#cell2 > #bottomRow {
display: table-row;
width: 100%;
border: 1px solid red;
padding-top: 10px;
padding-bottom: 10px;
}
<div class="table">
<div id="cell1">
<span id="line1">line 1</span>
<br>
<span id="line2">line 2</span>
<br>
<span id="line3">line 3</span>
</div>
<div id="cell2">
<div id="topRow">
This is the top row
</div>
<div id="bottomRow">
This is the bottom row
</div>
</div>
</div>

Answer 1

Remove display:table-row to make the bottom border visible
or use:
<div id="topRow">
This is the top row
</div>
<hr />
<div id="bottomRow">
This is the bottom row
</div>

Answer 2

What you have to do is create one full width row with your <hr> within it.
<tr><!-- table row 100% width -->
<hr></hr>
</tr>
Your defining a new full width table row with only the horizontal rule running through it.
Actually it appears you aren't even using tables, so this is kind of an odd question - but, in your case just make a full width div with the <hr> within it, or position the hr absolute with a higher z-index by adding a selector directly to hr element.