Brtdku

I have a row of columns that consist of an image some text and a button. How can I have the button on the bottom of each of the columns look aligned.

I tried various flex box methods for example flex-end, however that messes with the rest of the content alignment. I have also used position relative for the parent and position absolute bottom 0 for the button. The the problem with that is it collides with the sibling paragraph tag that might contain a different length of text.

Example Image
!(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>

Try this:

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; 

  }

view the output here: https://jsfiddle.net/2467mgn5/2/