Boostrap 3 input with addon and help block - css

Question

Using Bootstrap CSS 3.3.1, I got a little problem with an input with an addon and a help block.
Just see the fiddle : https://jsfiddle.net/L8cyqoL1/1/
Tested on Firefox / Chrome. Is the markup wrong ? I tried "input-group" ... as class without success
Here is the markup :
<div class="form-group">
<label for="title" class="control-label col-md-3">Titre de la page</label>
<div class="col-md-9 input-group">
<div class="input-group-addon">
#
</div>
<input type="text" value="Value test" class="form-control input-xxlarge" id="title" name="title" size="46" />
<span class="help-block">Help Lorem Ipsum</span>
</div>
</div>

Answer 1

Try it like this:
<div class="form-horizontal">
<div class="form-group">
<label for="title" class="control-label col-sm-3">Titre de la page</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" id="title" name="title" class="form-control" />
</div>
<p class="help-block">Example block-level help text here.</p>
</div>
</div>
</div>
See this updated fiddle
(stretch the preview pane to see the column support)

Answer 2

Its fine to go with the accepted answer, but if you still need help-block inside the input-group (I needed it to support my working javascript to show inline errors) there is a workaround that would fix the issue and has cross browser support.
.input-group .help-block{
display: table-row;
}
here is the fiddle: https://jsfiddle.net/L4joxj90/2/
(this only has a limitation that we can't use the input-group-addon on the left side of the input field)