In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This problem persists across all divs and does not apply solely to tables, td, or tr elements.
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
.row:after {
clear: both;
}
.row {
zoom: 1;
}
.row.table {
border-right: none;
}
div.table {
border: 1pt solid black;
border-bottom: 0;
}
div.table>[class*='col-'],
.colcell {
border: 0;
border-right: 1pt solid black;
padding-left: 5pt;
padding-top: 1pt;
line-height: 9pt;
}
[class*='col-'] {
float: left;
height: 11pt;
vertical-align: top;
padding-right: 5px;
height: 100%;
}
[class*='col-']:last-of-type,
.last {
padding-right: 0;
}
.col-10-2 {
width: 20%;
float: left;
padding-right: 1%;
}
.col-10 {
width: 10%;
float: left;
padding-right: 1%;
}
.col-2 {
width: 50%;
float: left;
padding-right: 1%;
}<div class="row table header">
<div class="colcell col-10">Qty</div>
<div class="colcell col-10-2">SKU</div>
<div class="colcell col-2">Product Description</div>
<div class="colcell col-10">Unit Price</div>
<div class="colcell col-10">Ext Price</div>
</div>
<div class="row table">
<div class="colcell col-10">1</div>
<div class="colcell col-10-2">020145</div>
<div class="colcell col-2">Pokémon Folio Wallet iPhone 6 Case - JLRQ-PK-PB Pokémon Magnetic Folio Wallet</div>
<div class="colcell col-10 price">$ 99.99</div>
<div class="colcell col-10 price">$ 99.99</div>
</div>