Bring two paragraphs to the same position at different heading heights

Asked Jul 02 '19 at 16:05

Active Jul 02 '19 at 16:11

Viewed 33 times

i'm using a CMS and there are a lot of headlines wich are not always have the same row-count. I would like to align the content to the same position next to each other.

.row {
  display: flex;
  /* equal height of the children */
}

.col {
  flex: 1;
  /* additionally, equal width */
  padding: 1em;
  border: solid;
}

h1 {
  flex: 1;
  /* additionally, equal width */
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">
    <h1>test</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="col">
    <h1>test<br>2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
      <p></p>
  </div>
</div>

edited Jul 02 '19 at 16:08

Paulie_D

107,962
13
142
161

asked Jul 02 '19 at 16:05

justcasper

Basically - you can't - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Jul 02 '19 at 16:07
1

If you're using jQuery this would be fairly trivial to accomplish by grabbing the heading with the greatest height and setting the others. – isherwood Jul 02 '19 at 16:08
http://brm.io/jquery-match-height/ – Paulie_D Jul 02 '19 at 16:19
It's pretty easy with jQuery. I hoped for a CSS-only solution. Thank you. :) – justcasper Jul 02 '19 at 16:49

Bring two paragraphs to the same position at different heading heights

0 Answers0