title: How to keep horizontally placed input fields always aligned?
body: <p>I have forms on a web-page that have a distinct styling problem.  </p>
  
  <p>One of the requirements for the forms is that, whenever a form contains an error, the error message must appear between the label and the input field.  Whenever there is no error, there should only be a label and an input field. See the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/pcYMN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pcYMN.png" alt="enter image description here"></a></p>
  
  <p>The issue is that whenever the error message pops up, the input field is pushed down, and input fields in the same row are no longer aligned with each other.  I need input fields horizontally from one another to be aligned.  In other words, it should look like the following picture (ignore the silly watermark):</p>
  
  <p><a href="https://i.stack.imgur.com/0orBR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0orBR.jpg" alt="enter image description here"></a></p>
  
  <p>These are the main things that I need help figuring out:</p>
  
  <ol>
  <li>Have the error message appear correctly between the label and the input field.</li>
  <li>Keep the input fields aligned in a straight line at all times</li>
  <li>Keep the label, error message, and input field in the same div as each other (they cannot be in separate rows)</li>
  <li>Do all three of the above at the same time</li>
  </ol>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;div&gt;Label for first input field!&lt;/div&gt;
            &lt;div class="error"&gt;Label for first error message!&lt;/div&gt;
            &lt;input type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;div&gt;Label for second input field!&lt;/div&gt;
            &lt;div class="error"&gt;Label for second error message!&lt;/div&gt;
            &lt;input type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;div&gt;Label for third input field!&lt;/div&gt;
              &lt;!--&lt;div class="error"&gt;Label for third error message!&lt;/div&gt; --&gt;
            &lt;input type="text"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>.error{
    color:red;
  }
  </code></pre>
  
  <p>This is a link to a plunker: <a href="http://plnkr.co/edit/i0RR3XXeevh03TtoBP1M?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/i0RR3XXeevh03TtoBP1M?p=preview</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This question is only concerned about the styling of these input fields.  This isn't the actual code that I'm trying to edit, but rather a minimal example which mirrors the problem I'm trying to solve.  There's no need to think about the mechanisms through which the error messages appear, but rather the styling only.</p>