CSS - テキストが他のdivのテキストと揃う

Question

私は、コードに表示されているようなディスプレイでウェブサイトを作ろうとしています。私が取り組んでいる問題の1つは、この例のように、「Sweep」というテキストがside_panel_left divの「Select Campaign:」というテキストと整列し続けることです。私は代わりに自分のdivの一番上に表示したいと思います。例は、「Run code snippet」で確認できます。

side_panel_right divの表示を変更して、それが変更されるかどうかを確認しようとしましたが、ブロックまたは表セルのいずれの場合でも、テキストはまだ"Select Campaign:"と揃っています。

これにはどのような理由がありますか？この動作を無効にする方法はありますか？ちょうど"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

は、設定したい位置スイープボタン

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