html - CSS - 文本与其他 div 中的文本对齐

Question

我正在尝试制作一个网站，其显示效果与代码中显示的一样。我一直遇到的一个问题是，如示例中所示，“Sweep”文本始终与 side_panel_left< 中的“Select Campaign:”文本对齐 分区。我希望它出现在它自己的 div 的最顶部。可以通过“运行代码片段”查看示例。

我尝试更改 side_panel_right div 的显示以查看这是否会有所改变，但似乎无论是 block 还是表格单元格，文本仍然与 "Select广告系列:“。

这背后的原因是什么？有什么方法可以覆盖此行为，让 "Sweep" 出现在 side_panel_right 的顶部？

#app_container {
    display: table;
    width: 100%;
}

#side_panel_left {
    display: table-cell;
    width: 240px;
}

.panel {
    border: 1px solid rgba(0,0,0,.12);
}

.input_title {
    position: relative;
    left: 5%;
}

.input_element {
    display: block;
    margin: 8px;
}

.input_box {
    position: relative;
    width: 30%;
    left: 40%;
}

.trigger_buttons {
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.run_reset_buttons {
    float: left;
    width: calc(50% - 2px);
}

#map {
    display: table-cell;
}

#side_panel_right {
    display: table-cell;
    width: 140px;
}

<div id="app_container">
        <br>
        <div id="side_panel_left">
            <div id="campaign_select" class="panel">
                <span class="input_element input_title">Select Campaign:</span>
                <select id="campaign_drop" class="input_element input_box"></select>
            </div>
            <div id="numerical_input" class="panel">

            </div>
            <div id="run" class="trigger_buttons run_reset_buttons panel">
                Run
            </div>
            <div id="reset" class="trigger_buttons run_reset_buttons panel">
                Reset
            </div>
        </div>
        <div id="map" class="panel">

        </div>
        <div id="side_panel_right">
            <div id="sweep">
                Sweep
            </div>
        </div>
    </div>

Answer 1

将 vertical-align: top; 添加到 #side_panel_right

#side_panel_right {
    display: table-cell;
    width: 140px;
    vertical-align: top;
}