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

I had to restructure your code a bit.
Besides from this method, Using Flexbox is another good option.

Take a look at this jsFiddle

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

.column-page-column {
  width: 32%;
  display: table-cell;
  position: relative;
  padding-bottom: 30px;
}

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

div.footer {
  position: absolute;
  bottom: 0px;
  
}

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>
		  </div>
      <div class="footer">
        <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>
		  </div>
      <div class="footer">
        <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>
		  </div>
      <div class="footer">
        <p class="call-to-action"><a class="button" href="#">Read more</a></p>
      </div>
    </div>
  </article>

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

Answer 2

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.

Answer 3

You could add an artificial padding to the bottom of the posts. Say like padding-bottom: 3em; Then make the position:relative on the post and the position:absolute; on the link. Set the bottom:0 or .5em and that should always place that link at the bottom of the containers. You could also try using Foundation's plugin "Equalizer" http://foundation.zurb.com/sites/docs/equalizer.html That should give you the correct illusion.