Add a hr horizontal rule in html page - html

Question

In my page, i have a Col which contains of an image container and below it i would like to add a banner. I want to add a hr or horizontal rule to separate the two as follows
As you can see the hr is added but when i scroll my image container, the hr doesn't stay. See image as follows:
How do i make the hr stay irrespective of the entire length and scroll. Any help?
HTML code:
<Col className="details">
<div className="image-container">
<center>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/51PhUckHB3L.jpg"></img>
<div className="caption">Product Title<br></br>
<small className='ellipsis'>Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</small>
<span className="tooltiptext">Electrolux EENB54EB Ultraenergica Classic Aspirapolvere</span>
</div>
</div>
</div>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
<div className="caption">Left Product Title<br></br>
<small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
<span className="tooltiptext">Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
</div>
</div>
</div>
<div className='container p-1'>
<div className="image">
<img style={{ width: 200, height: 200 }} src="http://ecx.images-amazon.com/images/I/518Se4188mL.jpg"></img>
<div className="caption">Right Product Title<br></br>
<small className='ellipsis'>Amore Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</small>
<span className="tooltiptext">Third Legno Sforza segnalibro, segnalibro particolare, segnalibro legno, segnalibro laurea, idea regalo, segnalibri regali, regali originali per amiche, portafortuna da regalare, made in Italy</span>
</div>
</div>
</div>
</center>
</div>
<hr/>
<div>
{/* <center> */}
{/* <img style={{ width: 350, height: 350 }} src='http://ecx.images-amazon.com/images/I/518Se4188mL.jpg'></img> */}
{/* </center> */}
</div>
</Col>

Answer 1

Just put your hr inside the div from which you want to inherit the width. Otherwise if your content scrolls horizontally in sections you could block it in the middle of 2 divs, but I don't think it's your case (see second snippet).
.long-div {
width: 250vw;
}
<div class="long-div">
long div 1
<hr/>
</div>
<div class="long-div">
long div 2
</div>
.long-div {
overflow-x: auto;
}
.long-div-content {
width: 250vw;
}
<div class="long-div">
<div class="long-div-content">
long div 1
</div>
</div>
<hr/>
<div class="long-div">
<div class="long-div-content">
long div 2
</div>
</div>