Wrap the textarea around a HTML element

Question

Is there any way I can wrap a textarea HTML element around a HTML element? In my case I want to wrap the textarea around the label.

This is what I try to achieve:

Label name: *********
*********************
*********************

Where the * is the text area.

Answer 1

You can't use HTML tags inside <textarea> but you can use absolute positioning to place the label at the desired position.

Then, you can use the CSS text-indent property (more info on MDN) to offset the first line of the textarea so the label doesn't overlap it.

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}

<div>
  <label>This is the label :</label>
  <textarea cols="30" rows="10"></textarea>
</div>