How to align
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" />

Voted to reopen, because that duplicate does not appear to be about what you are asking here. The code you have shown is way too little though - that shows just one of those items, but gives us no idea of what context/container elements they might be in, nor what formatting currently applies. Please go read [ask] and [mre], and then edit your question to include code that actually properly illustrates your problem. (Should in this case rather be the created HTML, than any PHP code, which we do not have the background data for anyway.) — CBroe, Jan 29 '21 at 10:29
Looking for this: https://stackoverflow.com/questions/2114757/css-equal-height-columns — Justinas, Jan 29 '21 at 10:33

score 0 · Answer 1 · answered Jan 29 '21 at 10:36

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>

score 0 · Answer 2 · answered Jan 29 '21 at 11:08

From info of the duplicate, you may also use a built-in flex classes.

here an example :

/* CSS example that could be classes */
ul {
  margin: 0;  /* bs4 class is m-0*/
}
/* or */
 ul {
  margin: auto 0;  /*bs4 class are  mx-0 my-auto */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid row  justify-content-center">
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">3 col run on full page mode</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
  </div>

How to align elements inline if text is different length before it

2 Answers2

How to align
elements inline if text is different length before it