垂直对齐两个UL

Question

我试图让我的响应式导航栏设置好但我仍然坚持垂直对齐元素。

这是导航栏HTML：

<nav class="navbar">
    <ul class="navbar-left">
        <li><a href="#">Menu</a></li>
        <li>
            <form method="post">
                <label>
                    <input type="text" autofocus>
                </label>
                <button type="submit">Search</button>
            </form>
        </li>
    </ul>
    <ul class="navbar-right">
        <li>
            <a class="button" href="#">Publish</a>
        </li>
    </ul>
</nav>

这里是JSFiddle

我已经尝试使用此线程中的表格显示来垂直对齐我的元素：How to vertically align <li> elements in <ul>?。如果我尝试在UL中对齐所有LI，但如果我尝试在DIV中对齐所有UL，它就不起作用。