Lay <HR> on top of a box in CSS - html

Question

I have a specific box style that I'm trying to accomplish and it's got me stumped. Here is a reference image:
box with border and additional line styling
A few items, first and foremost, I'm beginning to learn responsive design and I've been able to accomplish this but as soon as I start to resize it breaks. I would like it the box and hr to work all as one item.
What I've tried:
- Box with border
- HR styled within the box div and outside
- HR with Z-Index
Here is the code:
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: relative;
margin-right: -.2%;
margin-top: -.75%;
z-index: 999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
margin-top: -16%;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>
I'm not entirely sure I'm going about this the right way, but any help would greatly appreciate it. I have tried to search around and this is as far as I've been able to get with the information I found.'
UPDATE:
I couldn't see a way to award this answer since it was a comment. But I believe I may have found a much better way of doing this without using an HR tag.
t looks like you are using to decorate the box and not to indicate a separation in your content (since they are at the very start and end). You can use a pseudo-element on your #valuesContainer instead to layer a box on top with absolute positioning (make sure #valuesContainer is relatively positioned).

Answer 1

Try using position: absolute and relative on the parent div
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
position: relative;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: absolute;
top: -17px;
right: -7px;
z-index: -999999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
position: absolute;
top: -14px;
right: -8px;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>