div中有两个并排的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

在两个br之间删除div：

.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>