Input label on two lines next to input field

I want to have one label that is associated with the input field. Some of the labels need to go on more than one line. However, I am not able to view the text. What I am trying to achieve is shown below:

Label 1         开发者_StackOverflow;             <input />

sub text for label 1

The code I currently have is as follows:

<div class="row">

<label for="height">Height (help text here)</label>

<input name="height" id="height" ... />

</div>

CSS:

form { width: 100%; overflow: hidden; margin-top: -20px;}

form .row { height: 100%; overflow: hidden; padding-left: 140px; width: 295px; line-height: 30px; position: relative; margin-bottom: 6px; }

form label { position: absolute; top: 0; left: 0; line-height: 32px; text-align: left; width: 110px; font-size: 14px; display: inline-block}

There are a few rows that need to be formatted like this. Thank you for any help you can provide.

<div class="row">
  <label for="height">Height <br /><span>(help text here)</span></label>
  <input name="height" id="height" ... />
</div>


label {
  display: block;
  float: left;
}

make the label a block element so you can put a br. not a good solution also but it works :P

Try this :

<div class="row">
<label for="height">Height (help text here)</label><input name="height" id="height" ... /><br/>
<label for="height">Sub text</label>
</div>

It may be a workaround to your issue, but not a perfect solution

How about:

<div class="row">
<label for="height">Height</label>
<input name="height" id="height" ... />
<label for="height" class="help">help text here</label>
</div>

And CSS:

.row label {
    display: inline-block;
    width: 40%;
}

.row input {
    display: inline-block;
    width: 50%;
    margin: 0 0 0 5%;
}

.row label.help {
    display: block;
}

JS Fiddle demo.