I need to design a form with multiple labels and form elements such as text areas and radio buttons. However, when using the Bootstrap horizontal form method, there is a one-line difference between the label and text area in my code:
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<form class="form-horizontal">
<div class="control-group">
Promo description *
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
</form>
</body>
<html>
As shown in the screenshot, there is an issue with aligning the label and text area horizontally. Are there any guidelines on how to achieve this alignment?