Responsive Line next to a header - html

Question

I'm trying to get a response line next to a heading
Picture above is from a pdf not the site
I tried using a Div with a border bottom but its out of place because its a border it sits lower, I then tried using a <hr And The same thing it doesnt align properly There are one's at the bottom center ect.
How do I achieve something of the sorts without having to set responsive stylings every few pixel's.
<div class="container">
<div class="we-are">
<div class="row">
<div class="col-md-4">
<h2>We are.</h2>
</div>
<div class="col-md-8 line-right">
<hr>
</div>
</div>
</div>
</div>
.line-right hr{
position: absolute;
bottom: 0;
width: 100%;
border: 0;
border-bottom: 5px #BFE2CA solid;
}
My result:
I do realize I can ofcourse do something like
marign-top:50px
But it wont be very responsive

Answer 1

I would suggest a different approach using pseudo-elements
Here your HTML code:
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
And here your CSS, where the line is made by the _pseudo-element after:
h2 {
margin: 0;
}
.parent {
position: relative;
width: auto;
display: inline-block;
}
.parent:after{
display: block;
content: "";
position: absolute;
bottom: 4px;
left: calc(100% + 20px);
width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */
height: 5px;
background: #BFE2CA;
}
If you want to have the line vertically aligned just change your CSS accordingly (remove bottom and add top):
top: 50%;
transform: translateY(-50%);
Here's a working live Codepen: https://codepen.io/alezuc/pen/dyYGxYY

Answer 2

Yous should use something like dynamic when the font or the screen varies, you have to set the line to the period symbol first and then even if you increase/decrease the font that shouldn't change the line.
you can try something like this. you can try to change the font and you see the line sticks to the same position and you just have to increase the height of the line based on font.
Snippet
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: 5px;
border: 1px solid red;
}
.parent {
position: relative;
width: auto;
display: inline-block;
font-size:3em; /* change the size and see the difference */
}
.parent:after {
content: "";
position: absolute;
bottom: 20%;
left: calc(100% + 20px);
width: 500px;
/* height is the only thing you have to change irrespective of the font. */
height: 5px;
background: #BFE2CA;
}
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>