Equal height column on anchor tag

by Kheema Pandey

HTML

<ul>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 1</h4></div>
        </div>
        <div class="two">
            Here is some text.
        </div>
        </a>

    </li>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 2</h4></div>
        </div>
        <div class="two">
            Here is some text.<br />
            But there is more.
        </div>
        </a>

    </li>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 3</h4></div>
        </div>
        <div class="two">
            Here is some text.<br />
            But there is more.<br />
            And even more.
        </div>
        </a>

    </li>
</ul>

CSS

body {
    padding: 20px;
    background: #eee;
}
ul {
    list-style: none;
    display: table;
    border-collapse: separate;
    border-spacing: 30px 0;
    width: calc(80% + 60px);
    margin: 0 -30px;
    padding: 0;
    overflow:hidden;
}
li {
    display: table-cell;
    overflow:hidden;
    width: 33.33333%;
    background-color: #FFF;
    vertical-align: top;
    padding: 10px;
}
a {
    display: block;
    background: red;
    position:relative;
}
li {
    overflow:hidden;
}
a:after {
    content:'';
    position:absolute;
    width:100%;
    height:400px;
    background:inherit;
}
a:hover {
    background: #CCC;
}
.one {
    height: 100px;
    background-color: #C92;
    position: relative;
}
.caption {
    position: absolute;
    bottom: 0;
}
h4 {
    margin:0;
    padding:5px;
}
.two {
    padding:5px;
}