html - Div 彼此不对齐

Question

我有两个 div，它们应该并排放置。但是，一旦我向左侧 div 的输入框添加填充，右侧 div 就会移动。

知道为什么吗？

html 和 css 如下所示

<div style="text-align:center">
    <div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px">
        <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>NEW USER</u></div>
        <div style="
            /* text-align: left; */
            padding-top: 20px;
            width: 100%;
            ">
            <input type="text" name="email" id="email" placeholder="(Email)" style="
                width: 90%;
                /* margin: 10px; */
                height: 30px;
                ">
        </div>
    </div>
    <div style="display:inline-block;width:350px;height:200px;background-color: rgba(193, 89, 97, 0.61);margin-left:30px">
        <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961;"><u>EXISTING USER</u></div>
        <div>
            <input type="text" name="email" id="email" placeholder="(Email)">
        </div>
    </div>
</div>

http://jsfiddle.net/cAJgq/

Answer 1

在 div 样式中添加 vertical-align: top