How do you align 2 columns inner paragraph text when headers vary in size using flexbox?

Question

How can I align my paragraphs between columns when my h1s vary in size? caveat I have no control over the size of headers and therefore cannot add a static height.

Align to the crosshairs.

HTML:

<div class="paddingBlock">
  <h1>Align the paragraphs to dynamic height h1s</h1>
  <p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>


  <div class="eqWrap">
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
  </div>
</div>

CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    box-sizing: border-box; 
}

html, body  { 
    height: 100%;
    width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

h1 {
  font-size: 150%;
}

p {
  margin-bottom: 10px;
}

.eqWrap {
    display: flex;
}

.eq {
  width: 50%;
    padding: 10px;
}

.eq:nth-child(1) {
  background: papayawhip;
}

.eq:nth-child(2) {
  background: maroon;
}

css cannot, js can look for headers height. Else if content **deserves** an HTML table, then `thead th` and `tbody td` will naturally do and will keep titles linked to their respective texts. — G-Cyrillus, Aug 03 '16 at 19:36
That's correct. Flexbox cannot align elements that do not share a parent, — Paulie_D, Aug 03 '16 at 19:39
If you know the widths of the columns already, it is not responsive and you're not so concerned about semantics, your best bet would be to put the headings into a row and the content paragraphs into another row with corresponding columns or just use an HTML table, it does most of these for you. If the above criteria concerns you then you should use javascript to find the height of all headings explicitly and apply the highest to all. — BlackPanther, Aug 03 '16 at 20:19

score 1 · Answer 1 · edited May 23 '17 at 11:51

One thing you can try is to make your content boxes (.eq) flex containers, then use auto margins to pin the paragraphs to the bottom:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: sans-serif;
  line-height: 1.4;
}
h1 {
  font-size: 150%;
}
.eqWrap {
  display: flex;
}
.eq {
  width: 50%;
  padding: 10px;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}

p {
  margin-top: auto;       /* NEW */
  margin-bottom: 10px;
}

<div class="paddingBlock">
  <h1>Align the paragraphs to dynamic height h1s</h1>
  <p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>
  <div class="eqWrap">
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
    <div class="eq">
      <h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
      <p>Align these paragraphs. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam
        harum commodi impedit.</p>
    </div>`
  </div>

Revised Codepen

Depending on the size of each paragraph, and where you want your h1 aligned, you may need to adjust the auto margins. Here are some examples: Methods for Aligning Flex Items

How do you align 2 columns inner paragraph text when headers vary in size using flexbox?

1 Answers1