How to make flexbox items equal height and/or start at the same point

Question

I'm creating flexbox cards to display three elements. A title, an <hr> and a paragraph. The title text length varies, which creates a varying height.

I'd like to have all the titles have the same height, so that each card is uniform. If this is not possible, I would like the paragraphs to be horizontally aligned on each card.

I've tried giving the title a flex: 1 property to push the paragraph down, but it creates too much space.

Here is codepen and demo:

  body {
  max-width: 1180px;
  margin: 0 auto;
  }
  h2,
  p {
  margin: 0;
  padding: 0;
  }
  h2 {
  font-size: 18px;
  }
  /*******************************************************/
  .cards {
    display: flex;
  }
  .card {
    border: 1px solid;
    display: flex;
    flex-direction: column;
    margin: 0 0 25px 0;
    width: 50%;
  }
  .card-title {
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 25px 0;
  }
  .card-paragraph {
    text-align: center;
  }
  hr {
    height: 3px;
    width: 100%;
    background: #333;
  }
  /*******************************************************/

<body>

  <div class="cards">
    <div class="card">
      <div class="card-title">
        Title one IS LONGER THAN TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">  
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
      </div>
    </div>
    <div class="card">
      <div class="card-title">
        TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">  
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </div>
  </div>
  
</body>

What I want:

What is happening:

https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout — sheriffderek, Apr 10 '19 at 02:53

score 2 · Answer 1 · answered Apr 10 '19 at 03:03

I would suggest CSS Grid for something like this:

body {
  max-width: 1180px;
  margin: 0 auto;
}

h2,
p {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 18px;
}


/*******************************************************/

.cards {
  display: grid;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
}

.card {
  border: 1px solid;
  grid-row: 1;
  display: grid;
  grid-auto-rows: 1fr;
}

.card-title {
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 25px 0;
}

.card-paragraph {
  text-align: center;
}

hr {
  height: 3px;
  width: 100%;
  background: #333;
}


/*******************************************************/

<body>

  <div class="cards">
    <div class="card">
      <div class="card-title">
        Title one IS LONGER THAN TITLE TWO Title one IS LONGER THAN TITLE TWO Title one IS LONGER THAN TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
      </div>
    </div>
    <div class="card">
      <div class="card-title">
        TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </div>
  </div>

</body>

It's because of the bottom margin of `25px` in `.card-title`. — Andy Hoffman, Apr 10 '19 at 03:38

kukkuz · Accepted Answer · 2019-04-10T03:23:35.240

Aligning adjacent flexbox containers may not be possible - CSS Grid might be a good choice:

use display: contents on the card or remove the wrapper altogether
use a 2-column grid and place the card-title to the first row using grid-row: 1
place the card-paragraph to the thrid row using grid-row: 3 and place the hr in between using grid-row: 2.

See demo below:

body {
  max-width: 1180px;
  margin: 0 auto;
}

h2,
p {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 18px;
}

.cards {
  /* display: flex; */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card {
  /* border: 1px solid;
  display: flex;
  flex-direction: column;
  margin: 0 0 25px 0;
  width: 50%;*/
  display: contents; /* added */
}

.card-title {
  text-transform: uppercase;
  text-align: center;
  /* margin: 0 0 25px 0;*/
  grid-row: 1; /* added */
  border: 1px solid;  /* added */
}

.card-paragraph {
  text-align: center;
  grid-row: 3; /* added */
  border: 1px solid;  /* added */
}

hr {
  height: 3px;
  /* width: 100%; */
  background: #333;
  margin: 0; /* added */
  grid-row: 2; /* added */
}

<div class="cards">
    <div class="card">
      <div class="card-title">
        Title one IS LONGER THAN TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text.
      </div>
    </div>
    <div class="card">
      <div class="card-title">
        TITLE TWO
      </div>
      <hr>
      <div class="card-paragraph">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
    </div>
  </div>

How supported is the use of display: grid? Your answer does my solve my problem nicely, however the HR is at the bottom of the card container? EDIT: I changed the grid-row property to 3 instead of 2 — Rich, Apr 10 '19 at 03:19
@Rich fixed the `hr`... grid is supported in modern browsers, you don't have in it IE... https://caniuse.com/#search=css-grid — kukkuz, Apr 10 '19 at 03:25
Ok. Kind of needed IE, but still a good solution. No way to align content like that just using flex at all? — Rich, Apr 10 '19 at 03:32
and support for `display: contents` - https://caniuse.com/#search=display%3A%20contents — kukkuz, Apr 10 '19 at 03:32
@Rich no, you can't align *flex items* in *adjacent flexboxes*.... see [another discussion here](https://stackoverflow.com/questions/55272962/alignment-of-content-vertically-in-adjacent-flexbox-containers/55291645#55291645) :) — kukkuz, Apr 10 '19 at 03:35

score 1 · Answer 3 · answered Apr 10 '19 at 05:01

1

It is possible with flexbox only by setting height of the title: .card-title { ... height: 50px; } Codepen

answered Apr 10 '19 at 05:01

villainmeng

126
2

But then if I have a long title that surpasses 50px in height, the text will overflow from the container. Not a solution. – Rich Apr 11 '19 at 03:26

How to make flexbox items equal height and/or start at the same point

3 Answers3