Label position is changing everytime I change the size of the window

Question

I have a label and a textarea, I want to display the label at the top of the textarea, the label is currently placed in the top of textarea but when I maximize / resize the window the label is synchronized with the textarea anymore. How can I fix this?

This is my code

<style type='text/css'>
form{display:inline;}
textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
input.button{width:50px;height:25px;vertical-align:middle}
#ib {
display: inline-block;
padding-left: 220px;

}
label { vertical-align: top; }
</style>

<label id="ib">Type word/s here:</label><br>
<center>
<textarea name="Input" class="textstyle" onkeydown="if(event.keyCode == 13) return false;">
<%= 
msg.trim()
</textarea>

Answer 1

The markup wasnt so clean. some unclosed tags and such.

 <style type='text/css'> form{display:inline;} textarea{width:200px;height:25px;font-size:25px;vertical-align:middle} input.button{width:50px;height:25px;vertical-align:middle} #ib { display: inline-block; padding-left: 0px; } label { vertical-align: top; } </style> <center> <label id="ib">Type word/s here:</label><br> <textarea name="Input" class="textstyle" onkeydown=""> </textarea> </center> 

I think this a better start

Answer 2

Here is a simplified version of what you were asking. As I had mentioned put the label and textarea inside a div and make it an inline-block. The div gets centered because of the center tag and the inline block will make it take up only the space needed by the content inside the Div. Float the label element to the left so that it occupies the left corner of that containing Div.

 div { display: inline-block; } .textstyle { width: 200px; height: 250px; font-size: 25px; } #ib { font-size: 15px; float: left; } 

 <center> <div> <label id="ib">Type word/s here:</label> <br/> <textarea class="textstyle">Enter sample text here</textarea> </div> </center> 

Hope this Helps