Заголовки внутри гибкого div с одинаковой высотой

Question

Я настраиваю html-карты. Все они должны иметь одинаковую высоту, но не только это, мне нужно, чтобы заголовки внутри карточек были одинаковой высоты, поэтому описание всегда начинается в одной и той же точке, независимо от длины заголовка. Вот кодовая ссылка с вопросом:

https://codepen.io/anon/pen/KLjXyx

{
      box-sizing: border-box;
    }
    body {
      background-color: #f5f5f5;
      margin: 0 auto; 
      max-width: 60em;
      line-height: 1.3;
    }
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      width: 100%;
    }
    h2 {
      margin-top: 0;
      margin-bottom: 0.4em;
    }

    /*Flex items*/
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .list-item {
    	display: flex; 
      padding: 0.5em;
    	width: 100%;
    }
    @media all and (min-width: 40em) {
      .list-item {
        width: 50%;
      }
    }
    @media all and (min-width: 60em) {
      .list-item {
        width: 33.33%;
      }
    }
    .list-content {
    	background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 1em;
    	width: 100%;
    }
    .list-content p {
    	flex: 1 0 auto;
    } 

<li class="list-item">
        <div class="list-content">
          <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
          <a href="">Link</a>
        </div>
      </li>

         <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
          <a href="">Link</a>
        </div>
      </li>

      <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
          <a href="">Link</a>
        </div>
      </li>
    </ul> 

Answer 1

var maxheight=0;
$("h2").each(function(){
	if($(this).height()>maxheight){
		maxheight=$(this).height();
	}
})
$("h2").height(maxheight);

* {
  box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
}
h2 {
  margin-top: 0;
	overflow:hidden;
  margin-bottom: 0.4em;
}

/*Flex items*/
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
	display: flex; 
  padding: 0.5em;
	width: 100%;
}
@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
}
.list-content {
	background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
	width: 100%;
}
.list-content p {
	flex: 1 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
	
	 <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>

это всегда будет иметь максимальную высоту h2 и применять ее ко всем другим элементам h2!поэтому все текстовые описания будут начинаться на одном уровне!

Answer 2

Заголовок всегда должен быть коротким. Обновите свой дизайн, попросите автора контента обновить его. Если выравнивание является только проблемой, вы можете попробовать следующее, но заголовок не будет отображаться полностью.

h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 3

Вы можете использовать третий параметр flex для управления этим, например, flex: 0 0 60% для элемента h2.

Обратите внимание, что вы можете настроить высоту элементовчтобы приспособиться к этому.

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0 auto;
  max-width: 60em;
  line-height: 1.3;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  width: 100%;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
  flex: 0 0 60%;
}


/*Flex items*/

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  display: flex;
  padding: 0.5em;
  width: 100%;
}

@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}

@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
  h2 {
    
  }
}

.list-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
  width: 100%;
}

.list-content p {
  flex: 1 0 auto;
}

<li class="list-item">
  <div class="list-content">
    <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
    <a href="">Link</a>
  </div>
</li>

<li class="list-item">
  <div class="list-content">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
    <a href="">Link</a>
  </div>
</li>

<li class="list-item">
  <div class="list-content">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
    <a href="">Link</a>
  </div>
</li>