0

I've built a 2x2 grid with text content with flexbox. It works fine, besides when I have to use a longer text in my <h3>, forcing a line break and pushing the <p> element down.

I'm looking for a solution that always make sure the <p> element is aligned relative to all of the <h3> elements within the text_container-class. There will always be a maximum of 2 lines in the <h3> in the project I'm currently working on.

Example picture of what I want(done with margin-bottom on <h3>, so it doesn't work):

enter image description here

Hope it makes sense!

Codepen: https://codepen.io/sigurdmazanti/pen/BawvzJy

Code:

.wrapper{
  max-width: 1000px;
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
}

.text_container{
  flex-basis: calc(45% - 20px);
  height: auto;
}
<div class="wrapper">
  <div class="text_container">
    <h3>This is a short headline.</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
  </div>

  <div class="text_container">
    <h3>This is a long headline. A really long one, actually. test test</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
  </div>

  <div class="text_container">
    <h3>This is a long headline. A really long one, actually. test test</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
  </div>

  <div class="text_container">
    <h3>This is a short headline.</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
  </div>
</div>
Paulie_D
  • 102,164
  • 10
  • 117
  • 144
Sigurd Mazanti
  • 1,081
  • 1
  • 5
  • 17

0 Answers0