title: Align multiple labels to left of form input
body: <p>I'm trying to stack two <code>&lt;span&gt;</code> tags in a form input label. At the moment, they're sitting next to each other, but I'm not sure how to move <code>span.label-sm</code> under the regular span. I've already set it to <code>display: block;</code>.</p>
  
  <p>Desired outcome: <a href="http://i.imgur.com/CkOKeWl.jpg" rel="nofollow">http://i.imgur.com/CkOKeWl.jpg</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="appraisals-form" class="contact-form"&gt;
      &lt;form role="form" method="post" action="contact-form.php"&gt;
          &lt;label for="name"&gt;&lt;span&gt;Name&lt;/span&gt;&lt;input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /&gt;&lt;/label&gt;
          &lt;label for="email"&gt;&lt;span&gt;Email&lt;/span&gt;&lt;input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /&gt;&lt;/label&gt;
          &lt;label for="email"&gt;&lt;span&gt;Phone&lt;/span&gt;&lt;input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /&gt;&lt;/label&gt;
  
          &lt;label for="name"&gt;&lt;span&gt;Type of Artwork&lt;/span&gt;&lt;span class="label-sm"&gt;(i.e. sculpture, painting...)&lt;/span&gt;&lt;input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /&gt;&lt;/label&gt;
  
          &lt;label for="message"&gt;&lt;span&gt;Message&lt;/span&gt;&lt;textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."&gt;&lt;/textarea&gt;&lt;/label&gt;
          &lt;div class="centred-button"&gt;&lt;input type="submit" value="" class="submit-button" /&gt;&lt;/div&gt;                  
      &lt;/form&gt;             
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.contact-form {
      margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 600px;
      font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
      font-size: 20px;
  }
  
  .contact-form label {
      display: block;
      margin: 0px 0px 15px 0px;
      text-transform: uppercase; /* New */
  }
  
  .contact-form label &gt; span {
      padding-top: 8px;
  }
  
  .contact-form label &gt; span, #recaptcha::before {
      width: 100px;
      text-align: right;
      float: left;
      padding-right: 20px;
      content: "";
  }
  
  .contact-form input, .contact-form textarea {
      margin-bottom: 15px;
      padding: 10px;
      border: none;
  }
  
  .contact-form input.input-field {
      width: 70%;
      height: 20px;
      font-size: 18px;
  }
  
  .contact-form .textarea-field {
      height: 250px;
      margin-bottom: 11px;
  }
  
  .contact-form .textarea-field, .g-recaptcha {
      width: 70%;
      font-size: 18px;
      display: inline-block;
  }
  
  .g-recaptcha {
      height: 78px !important;
  }
  
  #recaptcha {
      display: block;
      margin: 0px 0px 24px 0px;
  }
  
  textarea {
      resize: none;
  }
  
  textarea:focus, input:focus {
      outline: 0;
  }
  
  input.submit-button {
      background-image: url("../img/submit-button.jpg");
      width: 225px;
      height: 60px;
      border: none;
  }
  
  
  
  
  
  
  .appraisals .section-title {
      width: 100%;
  }
  
  #appraisals-form {
      width: 100%;
      max-width: 700px;
      top: auto;
      transform: none;
  }
  
  #appraisals-form label &gt; span {
      width: 150px;
      font-size: 16px
  }
  
  #appraisals-form span.label-sm {
      display: block;
      font-size: 14px;
      text-transform: none;
  }
  
  #appraisals-form input, #appraisals-form textarea {
      background-color: #d7d7d7;
  }
  
  #appraisals-form textarea {
      height: 100px;
  }
  
  #appraisals-form .centred-button {
      text-align: center;
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/tcap2Lcp/" rel="nofollow">http://jsfiddle.net/tcap2Lcp/</a>.</p>
  
  <p>Any help would really appreciated!</p>