Vertical align with table cell

Question

I can't figure out how to make each "View Jobs" vertically aligned at the bottom. Here is a jsfiddle https://jsfiddle.net/2ffm8gna/5/

HTML:
  <div class="row">
        <div class="item">
            <h5>Admin</h5>
            <p>Apply your skills and experience to any number of functional areas where customer satisfaction is the top priority.Apply your skills and experience to any number of functional areas where customer satisfaction is the top priority.</p>
            <a href="#">View Jobs</a>
        </div>
        <div class="item">
            <h5>Marketing</h5>
            <p>Be part of an inspired team responsible for ensuring brand integrity and championing the MD Value Proposition out in the world.<br /></p>
            <a href="#">View Jobs</a>
        </div>
    </div>

CSS

     .row {
     display: table!important;
     }
     .item {
    display: table-cell!important;
    width:45%;
    height:300px;
    border:2px solid blue;
}
   .item a   {
vertical-align:bottom!important;
color:red;
display: table-cell!important;
    }

What am I missing here?

Answer 1

You can use absolute positioning for this:

.item {
  position: relative;
}

.item a {
  position: absolute;
  bottom: 0;
}

JSFiddle

Answer 2

Vertical Align is to align the elements that are contained within the element that you are styling. So if you applied vertical-align to your .item, it would vertically align all items to the bottom. However you are applying it to a anchor tag (not a container), it does not align the anchor tag but it aligns the descendants within the element.

.item {
    display: table-cell!important;
    width:45%;
    height:300px;
    border:2px solid blue;
    position:relative;
}
   .item a   {
color:red;
position:absolute;
bottom:15px;
    }

I would use absolute positioning as I have done in this fiddle.