Positioning textarea label above (with or without table) - html

Question

I'm trying to position my two labels ("your message:" and "your email:") to the top-left of each of the textarea's, with "your message:" on the top textarea. Although even through this method: How will I align the label of a text area to top? I can't get it to work. Is the table required for it to work correctly? I've tried other methods to get it to function, such as grouping the form within a -p- tag but that also didn't work.
HTML
<div id="ContactUsForm">
<p>Contact Us</p>
<form>
<table>
<td>
<label for="message">your message:</label>
<textarea id="message" class="contact" name="message"</textarea>
<label for="email">your email:</label>
<textarea id="email" class="contact" name="email"></textarea>
</td>
</table>
</form>
</div>
CSS
#ContactUsForm {
position: absolute;
width: 1400px;
height: 400px;
top: 227px;
left: 42px;
border: 2px solid #E64A19;
}
#ContactUsForm p {
text-decoration: underline;
font-weight: bold;
position: absolute;
top: -15px;
left: 50px;
font-size: 30px;
}
.contact {
position: absolute;
background: white;
border: 2px solid #E64A19;
}
#message {
width: 500px;
height: 150px;
top: 100px;
left: 30px;
resize: none;
position: absolute;
}
#email {
width: 500px;
height: 70px;
position: absolute;
resize: none;
top: 300px;
left: 30px;
}
label {
vertical-align: top;
}

Answer 1

Get rid of position: absolute, I don't see a point of using it inside table in this case.
<div id="ContactUsForm">
<p>Contact Us</p>
<form>
<table>
<tr>
<td>
<label for="message">your message:</label>
<textarea id="message" class="contact" name="message"></textarea>
<label for="email">your email:</label>
<textarea id="email" class="contact" name="email"></textarea>
</td>
</tr>
</table>
</form>
</div>
#ContactUsForm {
width: 1400px;
height: 400px;
border: 2px solid #E64A19;
}
#ContactUsForm p {
text-decoration: underline;
font-weight: bold;
font-size: 30px;
}
.contact {
background: white;
border: 2px solid #E64A19;
}
#message {
width: 500px;
height: 150px;
top: 100px;
left: 30px;
resize: none;
display: block;
}
#email {
width: 500px;
height: 70px;
display: block;
resize: none;
top: 300px;
left: 30px;
}
label {
vertical-align: top;
}
Here's JSFiddle: https://jsfiddle.net/pa4r62eu/

Answer 2

You don't need to use a table for that.
You can achieve what you want with just two changes:
Remove all the position: absolute; of your code. In this way, each element will be placed above the next one (and you can remove all your left and top rules).
Add a display: block; rule to your labels. It will make your labels occupy all the width of its parent, and the textareas will be placed under them.
Looking at the snippet, you can see how much cleaner your code will be:
#ContactUsForm {
width: 1400px;
height: 400px;
border: 2px solid #E64A19;
padding: 10px;
}
#ContactUsForm p {
text-decoration: underline;
font-weight: bold;
font-size: 30px;
}
.contact {
background: white;
border: 2px solid #E64A19;
}
#message {
width: 500px;
height: 150px;
resize: none;
}
#email {
width: 500px;
height: 70px;
resize: none;
}
label {
display: block;
}
<div id="ContactUsForm">
<p>Contact Us</p>
<form>
<label for="message">your message:</label>
<textarea id="message" class="contact" name="message"></textarea>
<label for="email">your email:</label>
<textarea id="email" class="contact" name="email"></textarea>
</form>
</div>
Hope it helps!