different distance between elements with same classes - html

Question

I've stuck with styling issues. What I'm trying to reach is make sure that every single h3 tag has same distance between bottom border of his container (pink border) and bottom border of his parent (picture bottom border). Now it looks like this:
Both of them has same css, difference is only with amount of text.
HTML:
<div class="col-6">
<a href='{{link}}' style='background-image: url("{{image}}")' class="histories__image">
<div class="histories__text">
<h3>{{title}}</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
CSS:
.histories {
margin-bottom: 100px;
&__image {
height: 41vh;
margin-top: 33px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: filter 1s;
&:hover{
filter: brightness(80%);
}
&:hover .histories__text{
bottom: 15px;
}
&:hover .histories__underline{
opacity: 1;
left: 0;
width: 70%;
}
}
&__text {
text-align: center;
display: block;
position: absolute;
width: 100%;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
transition: bottom .3s;
color: white;
border: 1px solid pink;
}
&__underline {
position: absolute;
display: block;
bottom: 10%;
width: 0%;
left: 50%;
margin-left: 15%;
background-color: white;
height: 1px;
opacity: 0;
transition: width .3s, left .3s;
}
}

Answer 1

You can try using translate like this to center your content with the same class.
.histories__text{
width: 100%;
}
.histories__text h3{
transform: translate(50%,50%);
}
<div class="col-6">
<a href='{{link}}' class="histories__image">
<div class="histories__text">
<h3>Your Text</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>