title: Small help text relative to input field
body: <p>I need to put a small help text directly under a text input field, and if this field is indented (e.g. by a radio button as in my example), the help text should be indented too.</p>
  
  <p>An example of what I'm trying is here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#enteramt {
    width: 150px;
    display: inline;
  }
  
  #passwordHelpBlock {
    font-size: x-small;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="lead"&gt;
    &lt;input id="val_200" name="amount_sel" type="radio" value="200"&gt;
    &lt;label for="val_200"&gt; EUR 200,00&lt;/label&gt;
    &lt;br/&gt;
    &lt;input id="val_other" name="amount_sel" type="radio" value="other"&gt;
    &lt;label for="val_other"&gt; EUR
      &lt;input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00"&gt;
    &lt;/label&gt;
    &lt;small id="passwordHelpBlock" class="form-text text-muted"&gt;Min. EUR 2,00&lt;/small&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also see in Fiddle: <a href="https://jsfiddle.net/mheumann/wkLdjdcL/" rel="nofollow noreferrer">https://jsfiddle.net/mheumann/wkLdjdcL/</a></p>
  
  <p>I want it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/fjRkI.png" alt="Preview of what it should look like"></p>
  
  <p>I know I could use margin-left to move it over, but the same box may also appear without the radio button, so the margin would vary.</p>
  
  <p>Is there any way to bind the "small" tag to the "input" tag so it will always appear aligned directly underneath?</p>
  
  <p>EDIT: Removed references to Bootstrap, since the code snippet doesn't contain any.</p>