将2个div放在另一个具有不同边距的div中

Question

我希望在另一个divs内有2 margin-top，但是每次我尝试设置第一个margin-top时，第二个根据第一个first对齐一。假设second和divs在另一个div内是两个 second 。我想要这样的东西：

<input type="text" list="numbrs" id="num">
	<datalist id="numbrs">
		<option value="111">One</option>
		<option value="222">two</option>
	</datalist>

第一

但我得到了这个：

第二次

您可以更清楚地了解访问this小提琴

Answer 1

Flexbox救援！

#wrapper {
  display: flex;
}

.divF {
  margin-top:20px;
}
/*Border added for demo so you can see what's happening*/
#wrapper { border: 1px solid #777; }
.divF, .divS { border: 1px solid #CCC; }

<div id="wrapper">
  <div class="divF">
    <p>first</p>
  </div>
  <div class="divS">
    <a href=#>second</a>
  </div>
</div>

Answer 2

尝试vertical-align：top;请检查以下代码。

.divF{
  display:inline-block;
  margin-top:20px;
  vertical-align: top
}

.divS{
  display:inline-block;
  vertical-align: top
}

<div>
<div class="divF">
<p>
first
</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>