How to keep textareas from overlapping

Question

I have two textareas

<textarea>Text area 1</textarea>
<textarea>Text area 2</textarea>

I want to position themselves ontop of eachother like so:

However i do not want to use <br>.

Is there another way to do this in CSS? For example, messing with textarea margin or display properties?

Thanks.

Answer 1

Just make the textareas block elements.

textarea {
    display:block;
    margin-bottom:1em;
    clear:both;
}

JSFiddle

Answer 2

just set the textarea's to display: block and then you can use margin to adjust the spacing

JSFIDDLE