If a label is placed next to a textarea the text will be place at the bottom line. Often this don’t look good. In this tutorial I will show how you can have the label placed anywhere along side the textarea as shown below.

 

The reason why I am writing this post is because when I searched for this solution I came across expert-exchange solution. But I couldn’t see the solution because I had to pay to see it. So I decided to find a solution myself. The solution is very simple, it’s simply using the positioning technique in CSS.

The code that I used for my comment section is as follows.

Comment

and the CSS styling is as follows. The ‘top’ position can be altered to adjust the label position.

.comment-form-comment { position:relative;} label[for=”comment”] { position:absolute; top:5px;