php - How to align <hr> elements inline if text is different length before it

Question

(This proposed suggestion wasn't what I was looking for)

I have problem with having <hr> elements right after a title and text elements that is repeated by ACF in PHP. Different sizes of titles and text that are printed cause problems with the <hr> element being shown vertically in different places. When I want them to be inline with each other.

Here is pic for the current result explaining more the situation: mysituation

And code for this part:

<h2 class="entry-title py-3 text-center"><?php echo $title; ?></h2>
<?php echo $text; ?></p>
<hr class="hr-customcolor" />

question from:https://stackoverflow.com/questions/65952758/how-to-align-hr-elements-inline-if-text-is-different-size-length-before-it

Answer 1

It can be done with the help of grid technique.

.row {
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.col {
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>