Css jQuery Mobile-保持布局网格垂直对齐

我正在使用jquerymobile（JQM）布局网格进行表单验证项目。问题是，当我在其中一个字段上方添加错误时，同一网格中的另一个字段看起来垂直未对齐：

我想让这些字段保持内联，不管上面有什么错误，最好只使用css/HTML/JQM。错误消息必须保留在ui-block-a或b div中

这是HTML。在JQM默认提供的样式之外，没有css样式：

<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>

---

我假设您在提交时隐藏并显示相应的错误div

---

啊，恐怕不完全是这样。字段错误必须在ui块div中，就像我的示例HTML中一样。我认为问题的一部分在于JQM创建了自己的div，每个输入元素都有自己的样式。我也尝试了css-whitespace:nowrap，但不适用于JQM使用的css，它将适用于此。

.ui-grid-a {
position: relative;
}

.ui-block-a {
padding-right: 7px;
}

.ui-block-b {
padding-left: 7px;
position: absolute;
right: 0;
bottom: 0;
}

<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>

.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;
}