Two line input label next to input field

Question

I want to have one label associated with an input field. Some of the labels need to go over several lines. However, I cannot view the text. What I'm trying to achieve is shown below:

Label 1                           <input />
sub text for label 1

The code I have is the following:

<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 lines that need to be formatted as follows. Thank you for any help you can provide.

Answer 1

<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 the br command. not a good solution, but it works: P

Answer 2

Try the following:

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

,

Answer 3

:

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

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.