How to align images in card with dynamic title?

Question

I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.

This is how it should look like

.wrapper {
  width: 100%;
  display: flex;
}

.card{
   text-align: center;
   width: 33%;
   background: pink;
   margin-right: 10px;
   padding: 20px 5px;
}

.image {
  margin-top: 20px;
}

<div class="wrapper">
  <div class="card">
    <div class="head">
      <div class="title">
        Hello
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" /> 
      </div>
    </div>
  </div>
    <div class="card">
    <div class="head">
      <div class="title">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" /> 
      </div>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered May 12 '20 at 10:02

You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.

Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks

.wrapper {
  width: 100%;
  display: flex;
}

.card {
  text-align: center;
  width: 33%;
  background: pink;
  margin-right: 10px;
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
}

.title {
  flex: 1;
}

.image {
  margin-top: auto;
}

.head {
  display: flex;
  flex: 1;
  flex-direction: column;
}

<div class="wrapper">
  <div class="card">
    <div class="head">
      <div class="title">
        Hello
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
      </div>
    </div>
  </div>
  <div class="card">
    <div class="head">
      <div class="title">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </div>
      <div class="image">
        <img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
      </div>
    </div>
  </div>
</div>

what would be the alternative if I have more children? The thing you suggested with subgrids is only supported in Firefox? — Ask Nodejs, May 12 '20 at 11:01
That's the problem...there **is no current solution** outside of Javascript — Paulie_D, May 12 '20 at 11:07

How to align images in card with dynamic title?

1 Answers1