Varying lengh of link text in menu links makes links unequal height - css

Question

I making menu links which have varying lengths of link text. This makes some links wrap onto 2 lines and others not.
In the image below the red area is a link and so clickable, but the grey area is not. My code is the first example and I need to create the 2nd:
<ul>
<li>
Link 1
</li>
<li>
Link 2 which has very very very long text
</li>
<li>
Link 3
</li>
</ul>
ul {
padding: 0;
margin: 0;
display: table;
width: 400px;
border: 1px solid black;
}
li {
list-style-type: none;
display: table-cell;
background: grey;
width: 33%;
}
a {
background: red;
width: 100%;
display: inline-block;
height: 100%;
}
http://codepen.io/anon/pen/Gcaem/

Answer 1

This FIDDLE works.
CSS
ul {
padding: 0;
margin: 0;
display: table;
width: 400px;
border: 0px solid black;
}
li {
list-style-type: none;
display: table-cell;
background-color: transparent;
margin-left: 5px;
border: 5px solid white;
width: 33%;
height: 75px;
text-align: center;
border: 1px solid gray;
}
a {
display: table;
background-color: red;
color: white;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
a span {
display: table-cell;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
This is the result in firefox: