html - div 内有两个并排的 div，但一个 div 低于另一个

Question

我在一个较大的 div 中有两个较小的 div:一个在左侧，一个在右侧。但是，这两个 div 并未垂直对齐，如下面的链接所示。

divs as seen on webpage

我看到很多解决方案都说要使用 display:inline-block 和 vertical-align:top 但似乎对我没有任何作用。

HTML 和 CSS 代码:

.first-two {
  display:inline-block;
  width:100%;
}
.curr-val {
  float:right;
  width:50%;
}
.neigh {
  float:left;
  width:50%;
}

<div class="first-two">
		<div class="neigh">
		  <h4><b>Select your neighbourhood</b></h4>
		  <div class="custom-select">
			  <select id="location" class="dropdown">
				  ...
			  </select>
		  </div>
	  </div>
      	<br />
      
	  <div class="curr-val">
		  <h4><b>What's the current value of your house?</b></h4>
		  <h4 id="current_value_text" style="color:#333">$200,000</h4>
		  <div class="slider-box">
			<input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
			</div>
			<br />
		  </div>
		  </div>

Answer 1

删除两个div之间的br:

.first-two {
  display:inline-block;
  width:100%;
}
.curr-val {
  float:right;
  width:50%;
}
.neigh {
  float:left;
  width:50%;
}

<div class="first-two">
  <div class="neigh">
    <h4><b>Select your neighbourhood</b></h4>
    <div class="custom-select">
      <select id="location" class="dropdown">
        ...
      </select>
    </div>
  </div>
          
  <div class="curr-val">
    <h4><b>What's the current value of your house?</b></h4>
    <h4 id="current_value_text" style="color:#333">$200,000</h4>
    <div class="slider-box">
    <input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
    </div>
    <br />
  </div>
</div>