[FIXED] How to stick contents of div to the top of the div?

Issue

I want to have a paragraph, next to a button, next to a textarea element. I've made that, but now, when I expand the textarea, the button moves down too. I want to have a button and a paragraph that sticks to the top of the div it's in, so it must not be affected by the height of the textarea.

I know there has to be a very simple solution to this problem, but I couldn't find it :(

This is my code:

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

Solution

Try vertical-align:top for p and 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>

Answered By - XYZ

Answer Checked By - David Marino (PHPFixing Volunteer)