リストタグで長さの違う要素を合わせる

html

qiita.html

<ul class="match">
    <li><a href="#">リスト1</a></li><!--
    --><li><a href="#">リスト2</a></li><!--
    --><li><a href="#">リスト3</a></li><!--
    --><li><a href="#">リスト4</a></li><!--
    --><li><a href="#">リスト5</a></li>
</ul>

css

qiita.css

body {
    text-size-adjust: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.match li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px 10px 0;
}

ul.match li:nth-child(even) {
    padding-right: 0;
}

ul.match li:last-child {
    width: 100%;
    padding-right: 0;
}

ul.match li a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
    background: #3C7DD1;
    box-sizing: border-box;
}

サンプル