如何将 div 的内容粘贴到 div 的顶部？

Question

我想要一个 paragraph，在 button 旁边，在 textarea 元素旁边。我做到了，但是现在，当我展开 textarea 时，按钮也会向下移动。我想要一个按钮和一段粘在 div 顶部的段落，因此它不能受文本区域高度的影响。

我知道这个问题必须有一个非常简单的解决方案，但我找不到:(

这是我的代码：

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

Answer 1

尝试 vertical-align:top p 和 button

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}
p,button{
  vertical-align:top;
}

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

Answer 2

查看答案中的评论.. 将#parent 上的所有子项设置为顶部对齐

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

/* i added this */
#parent > * {
  vertical-align:  top;
  }

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

如何将 div 的内容粘贴到 div 的顶部？

How to stick contents of div to the top of the div?

html

css

textarea

button

vertical-alignment