Как выровнять кнопки в ряду столбцов

Question

У меня есть ряд столбцов, которые состоят из изображения, текста и кнопки.Как сделать так, чтобы кнопка внизу каждого из столбцов выглядела выровненной.

Я пробовал различные методы flex-box, например flex-end, однако это не соответствует остальной части выравнивания содержимого.Я также использовал положение относительное для родителя и положение абсолютного дна 0 для кнопки.Проблема в том, что он сталкивается с тегом абзаца, который может содержать текст различной длины.
Пример изображения! (https://www.dropbox.com/s/9e27ehcnqdsyx89/Screen%20Shot%202019-01-19%20at%2012.26.03%20PM.png?dl=0)

<div class="content" for number of content>
<img
/>

<div class="title">
  <h4>Title</h4>
</div>
<div class="body">
  <p>Paragraphs of various length</p>
</div>
<a>
  <button class="btn btn-default">
   CTA
  </button>
</a>
</div>

Answer 1

Попробуйте это:

HTML

<div class="container">
  <div class="item">
    <div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
    <div class="item__content">
      <div class="item__title"><h4>Title</h4></div>
      <div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
    </div>
    <div class="item__options">
      <button class="btn btn-default">CTA</button>
    </div>
  </div>

  <div class="item">
    <div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
    <div class="item__content">
      <div class="item__title"><h4>Title</h4></div>
      <div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
    </div>
    <div class="item__options">
      <button class="btn btn-default">CTA</button>
    </div>
  </div>

  <div class="item">
    <div class="item__image"><img src="https://dummyimage.com/300x300/000/fff" /></div>
    <div class="item__content">
      <div class="item__title"><h4>Title</h4></div>
      <div class="item__body"><p>Paragraphs of various lenthParagraphs of various lengthParagraphs of various length</p></div>
    </div>
    <div class="item__options">
      <button class="btn btn-default">CTA</button>
    </div>
  </div>
</div>

CSS

  .container {
    display: flex;
  }

  .item {
    display: flex;
    flex-flow: column;
  }

  .item:not(last-child) {
    margin-right: 10px;
  }

  .item__image {

  }

  .item__content {
    flex: 2 ;
  }

  .item__options {
    text-align: center;
    height: 100px; 
  }

посмотреть вывод здесь: https://jsfiddle.net/2467mgn5/2/