title: jQuery Mobile - Keep layout grid vertically aligned
body: <p>I'm using jQuery Mobile (JQM) layout grids for a form validation project. The problem is that when I add an error above one of the fields, the other field in the same grid looks misaligned vertically:</p>
  
  <p><a href="https://imgur.com/Ak4QbDv" rel="nofollow noreferrer"><img src="https://i.imgur.com/Ak4QbDv.png" title="Hosted by imgur.com" /></a></p>
  
  <p>I would like to keep the fields inline regardless of errors above them, preferably using css/HTML/JQM only. The error messages have to remain within the ui-block-a or b divs.</p>
  
  <p>Here is the HTML. There is no css styling outside of what JQM provides by default:</p>
  
  <pre><code>&lt;div class="ui-grid-a"&gt;
      &lt;div class="ui-block-a"&gt;
          &lt;label&gt;
              City:
              &lt;input type="text"/&gt;
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-b"&gt;
          &lt;div class="field-validation-error"&gt;The State field is required&lt;/div&gt;
          &lt;label&gt;
              State:
              &lt;select&gt;
                  &lt;option selected="selected"&gt;Select a state...&lt;/option&gt;
              &lt;/select&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried the following css override, but it ends up hiding the error message.</p>
  
  <pre><code>.ui-grid-a {
  position: relative;
  }
  
  .ui-block-a {
  padding-right: 7px;
  }
  
  .ui-block-b {
  padding-left: 7px;
  position: absolute;
  right: 0;
  bottom: 0;
  }
  </code></pre>