jQuery Mobile - Keep layout grid vertically aligned - css

Question

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:
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.
Here is the HTML. There is no css styling outside of what JQM provides by default:
<div class="ui-grid-a">
<div class="ui-block-a">
<label>
City:
<input type="text"/>
</label>
</div>
<div class="ui-block-b">
<div class="field-validation-error">The State field is required</div>
<label>
State:
<select>
<option selected="selected">Select a state...</option>
</select>
</label>
</div>
</div>
I have tried the following css override, but it ends up hiding the error message.
.ui-grid-a {
position: relative;
}
.ui-block-a {
padding-right: 7px;
}
.ui-block-b {
padding-left: 7px;
position: absolute;
right: 0;
bottom: 0;
}

Answer 1

I am assuming that you are hiding and showing the respective error divs on submit.
http://jsfiddle.net/B95jE/1/
<div class="error-div">
<div class="state-validation-error">The State field is required</div>
<div class="city-validation-error">The city field is required</div>
</div>
<br/>
<div class="ui-grid-a">
<div class="ui-block-a">
<label>
City:
<input type="text"/>
</label>
</div>
<div class="ui-block-b">
<label>
State:
<select>
<option selected="selected">Select a state...</option>
</select>
</label>
</div>
</div>
CSS:
.error-div{
position:relative;
}
.ui-grid-a {
position: relative;
}
.ui-block-a {
float: left;
}
.ui-block-b {
float: right;
}
.state-validation-error{
float:right;
}
.city-validation-error{
float:left;
display:none;
}