Css 无法水平对齐div

我有两个div，我想将它们水平对齐。我正在这样做：

CSS:

HTML:

发送
几行文字

---

我需要更改什么？

只是缺少垂直对齐：顶部

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
    border:1px solid #999;
    vertical-align:top;
}

（添加到可见性中的边框）

<div class="horidiv">
    <textarea></textarea>
    <br>
    <input type="text">
    <br>
    <div id="sendbutton">Send</div>
</div>
<div class="horidiv">
    <iframe width="300" height="225" frameborder="0" style="border:0" src="<gMapsAPI"></iframe>
    <p>Some lines of text</p>
</div>

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
    border:1px solid #999;
    vertical-align:top;
}