Label: inline-block

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<div class="container">

<h1>Label: inline-block</h1>

<p>
  <span class="help">This is your given name</span>
  <label>First name</label>
  <input>    
</p>

<label style='display:inline-block'>
  Example Label
</label>

<p  style='display:inline-block'>
The issue is that we can't force what follows the label to be on a new line. A <code>label + * { display: block }</code> doesn't work, as it forces what follows the label to be on a new line, which is an unwanted side effect.
</p>

</div>

CSS

.help {
  background-image: url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/img/glyphicons-halflings.png");
  background-repeat: no-repeat;
  background-position: -120px -96px;  
  max-width: 20px; max-height: 14px; text-indent: 20px; overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
label {
  display: inline-block;
}