css中的行分隔符

Question

HTML code snippet：

<div id="post_nav">
    <a class="prev" href="/2014/11/28/markdown-and-html.html">Some title <br/>Prev</a>
    <a class="next" href="/2014/11/30/sample-post.html">Some title <br/>Next</a>
</div>

CSS：

#post_nav {
  width:100%;
  display: inline-block;
  border-bottom: 1px solid $border-color;
}
#post_nav .prev {
  padding: 3% 5% 3% 10%;
  @media (max-width: 1000px) {
    padding: 3% 10%;
  }
  width: 50%;
  display: inline-block;
  float: left;
  text-align: left;
}
#post_nav .next {
  padding: 3% 5% 3% 10%;
  @media (max-width: 1000px) {
    padding: 3% 10%;
  }
  width: 50%;
  display: inline-block;
  text-align: right;
  border-left: 1px solid rgba(0,0,0,0.1);
}

问题：

它工作正常但当左侧链接文本比右侧链接文本长时，边框/行分隔符不完整。见下面的快照：

我该如何解决这个问题？