Vertically align elements to the bottom of div columns

Question

I've created a Wordpress theme for a client, and managed to allow them to create columns on their page. However, the columns differ slightly in height, making buttons look weird. You can see for yourself here. The site is in Dutch, but the read-more-buttons are clearly not aligned with each other.

I've created a JSFiddle where I've managed to make the columns the same height, but I can't manage to align the links to the bottom of the div. I've tried display: table-cell, table-row, etc.

.column-main {
  display: table-row;
}

.column-page-column {
  width: 32%;
  display: table-cell;
}

.column-page-column p.call-to-action {
  // thought this might, work but it doesn't
  display: table-cell;
  vertical-align: bottom;
}

article {border: 1px solid red;}

<div class="column-main hentry-wrapper column-main-3">
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 1</h3>
      </header>
		  <div class="entry-content">
			  <p>Blah blah blah</p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin. 
        </p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>
  
  <article class="column-page-column">
  	<div class="hentry-wrapper">
		  <header class="entry-header">
			  <h3 class="entry-title">Title 2</h3>
      </header>
		  <div class="entry-content">
			  <p>
          Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words,
          and so on, etc etc etc.
        </p>
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
		  </div>
    </div>
  </article>

  <div style="clear:both;"></div>
</div>

Is it possible to move the links down so they align with each other? I control the Wordpress theme, so I can alter the html, if necessary.

Answer 1

Using one implementation of flexbox, and greatly reducing the number of container elements you have around your content, you can achieve this:

.column-main {
    display: flex;
}
.column-page-column {
    width: 33%;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
.column-page-column p {
    flex-grow: 1;
}

<div class="column-main">
    <article class="column-page-column">
        <h3 class="entry-title">Title 1</h3>
        <p>Blah blah blah</p>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin.</p>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <p>Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words, and so on, etc etc etc.</p>
        <a class="button" href="#">Read more</a>
    </article>
</div>

The key is flex-grow: 1, which tells the <p> elements to take up all the remaining space in the container.