So I have a webpage with an h3 element next to a textarea element:

<h3>Notes:</h3> <textarea></textarea>

and I have the h3 display set to inline-block.
This is what it looks like:

I want the h3 to be positioned and the top of the textarea like so:

Any help would be very appreciated. Thanks!

CodePudding user response：

<h3 style="vertical-align: top;
text-align: left;">Notes:</h3> <textarea></textarea>
<!-- Use this vertical align css -->

Or else you can call the same css by internal method

CodePudding user response：

I think you are looking for this.
Use flex container and set margin: 0 to h3.
Because h3 has margin-block-start and margin-block-end
Of cause, h1 to h6 and p also has those margins.

.container {
  display: flex;
  align-items: flex-start;
}
h3 {
  margin: 0;
  margin-right: 10px;
}

<div class="container">
  <h3>Note:</h3>
  <textarea col="10" row="5"></textarea>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>