Border length of child div have width same parent div? - html

Question

I want to add a border-bottom between to post. But my post created by featured image and except wrap by parent div.
Like this:
.wrapper {
position: relative;
padding-bottom: 48px;
}
.thumbnail {
position: absolute;
left: 0;
top: 0;
}
.except {
margin-left: 350px;
min-height: 235px;
border-bottom: solid 1px #000;
}
<div class="wrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
<div class="wrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
By some reason, I must add border-bottom in class except but it only draw a line for this element. I want to the property border-bottom is full in element wrapper.
You can test on production website at here: https://sharengay.com
You can see currently like this:

Answer 1

Just wrap it in a div
.wrapper {
position: relative;
padding-bottom: 48px;
}
.thumbnail {
position: absolute;
left: 0;
top: 0;
}
.except {
margin-left: 350px;
min-height: 235px;
}
.subwrapper { /* Target */
border-bottom: 2px solid #000;
margin-bottom: 20px;
}
<div class="wrapper">
<div class="subwrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
<div class="wrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
https://stackblitz.com/edit/angular-mpunwb

Answer 2

Do I understand correctly : you want border-bottom along the entire length of wrapper ?
if so you need to remove margin-left: 350px;
.except {
min-height: 235px;
border-bottom: solid 1px #000;
}
Code Snippet:
.wrapper {
position: relative;
padding-bottom: 48px;
}
.thumbnail {
position: absolute;
left: 0;
top: 0;
}
.except {
min-height: 235px;
border-bottom: solid 1px #000;
}
<div class="wrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
<div class="wrapper">
<div class="thumbnail">
<img width="324" height="212" src="https://sharengay.com/wp-content/uploads/2018/07/banner-thu-thuat-xem-phim-netflix-324x212.jpg">
</div>
<div class="except">
<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>