Div layout width not expanding fully - html

Question

I am trying to assemble specific div layout, but I am running into two issues:
At the bottom of header blocks, there is a slight spacing, I can't seem to get rid of that
Metric values on the header blocks do not have the bottom border extended to full width. I've tried to setting to 100% or auto but it just keeps messing the layout to double rows and missmatches itself.
div.detail-block .detail-value{
width: 100%;
}
This makes it into two colums instead of below each other.
div.detail-block .detail-value{
width: auto;
}
Could you please help me figure out where the issue is?
I think I am using wrongly the display attributes in combinations with others, maybe I should try different approach?
div.detail-block {
position: relative;
border-left: 30px solid #9e9e9e;
display: inline-block;
}
div.detail-block h3 {
font-family: Calibri, system-ui;
font-size: 1.4rem;
color: #f4f5f7;
text-transform: uppercase;
margin-left: -35px;
position: absolute;
bottom: -45px;
left: 5px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
div.detail-container {
width: 100%;
}
div.detail-row:hover {
background: #ffffff;
}
div.detail-row {
border-bottom: 1px solid #dddddd;
line-height: 0.9;
}
div.detail-row .detail-key {
width: 230px;
background: #dfe1e5;
border: 1px solid #ffffff;
font-family: Calibri, system-ui;
font-size: 16px;
font-weight: 900;
display: table-cell;
padding: 3px 10px;
text-align: right;
justify-content: left;
}
div.detail-block .detail-key{
width: 200px;
}
div.detail-row .detail-value {
font-family: Consolas, system-ui;
text-align: left;
display: table-cell;
padding: 3px 10px;
}
div.detail-block .detail-value{
width: 500px;
}
.detail-container{
display: table;
width: 600px;
}
<div class="detail-container">
<div class="detail-table">
<div class="detail-row">
<div class="detail-key">Name</div>
<div class="detail-value">Value</div>
</div>
<div class="detail-row">
<div class="detail-key">Description</div>
<div class="detail-value">Value</div>
</div>
<div class="detail-block">
<h3>HEADER</h3>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
</div>
<div class="detail-block">
<h3>HEADER</h3>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Value</div>
</div>
</div>
</div>
My attempt so far is : https://jsfiddle.net/gbr23tnj/

Answer 1

1- line-height: 0;
2- rather than setting the .detaul-value class we can set its parent to width:100%; it will fix the issue.
div.detail-block{
width: 100%;
}
div.detail-block {
position: relative;
border-left: 30px solid #9e9e9e;
display: inline-block;
width: 100%;
}
div.detail-block h3 {
font-family: Calibri, system-ui;
font-size: 1.4rem;
color: #f4f5f7;
text-transform: uppercase;
margin-left: -35px;
position: absolute;
bottom: 5px;
left: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
div.detail-container {
width: 100%;
}
div.detail-row:hover {
background: #ffffff;
}
div.detail-row {
border-bottom: 1px solid #dddddd;
line-height: 0.9;
}
div.detail-row .detail-key {
width: 230px;
background: #dfe1e5;
border: 1px solid #ffffff;
font-family: Calibri, system-ui;
font-size: 16px;
font-weight: 900;
display: table-cell;
padding: 3px 10px;
text-align: right;
justify-content: left;
}
div.detail-block .detail-key{
width: 200px;
}
div.detail-row .detail-value {
font-family: Consolas, system-ui;
text-align: left;
display: table-cell;
padding: 3px 10px;
}
div.detail-block .detail-value{
/* width: 500px;
No need to use it i will set the conatiner of this element to width:100%
*/
}
.detail-container{
display: table;
width: 600px;
line-height: 0;
/*line-height works with tables to remove the space between two cells
}
<div class="detail-container">
<div class="detail-table">
<div class="detail-row">
<div class="detail-key">Name</div>
<div class="detail-value">Value</div>
</div>
<div class="detail-row">
<div class="detail-key">Description</div>
<div class="detail-value">Value</div>
</div>
<div class="detail-block">
<h3>HEADER</h3>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
</div>
<div class="detail-block">
<h3>HEADER</h3>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Values</div>
</div>
</div>
<div class="detail-row">
<div class="detail-key">Metric</div>
<div class="detail-value">Value</div>
</div>
</div>
</div>
</div>