css - 入力テキスト ボックス インラインの真上にエラー メッセージを配置する CSS

Question

こんにちは、HTML ページの CSS を設計しようとしていますが、以下は m 問題です。インライン コンテナーに 2 つのテキスト ボックスを並べて配置しています。

現在、入力を検証しており、それぞれのテキスト ボックスの真上にエラー メッセージを表示したいと考えています。そのため、スパンを作成し、それらを高さの低いインラインコンテナーに入れ、表示することを考えました。しかし、問題は次のとおりです。

ケース 1 : エラー メッセージの長さが短い場合、2 番目のテキスト ボックスの検証メッセージが左にシフトします。どうすればこれを回避できますか?

ケース-2 : 入力テキスト ボックス 1 の検証メッセージが長い場合、テキスト ボックス 2 のエラー メッセージを右端にシフトさせています。この場合、テキスト ボックス 1 の検証メッセージを、テキスト ボックス 1 の領域の上に複数行表示する必要があります。

私の HTML:

<div class="inline-container1">
    <ul><li><span class="validationMessage"
                data-bind="validationMessage: firstName" /></li>
         <li><span class="validationMessage"
                data-bind="validationMessage: lastName" /></li>
    </ul>
</div>
<div id="name" class="inline-container">         
    <ul>
        <li> <input id="firstName"
                name="firstName" type="text" class="required-input"
                placeholder="First Name *" data-bind="value: firstName" /> 
        </li>
        <li> <input id="lastName"
                name="lastName" type="text" class="required-input"
                placeholder="Last Name *" data-bind="value: lastName" />
        </li>
    </ul>
</div>

私のCSS：

.inline-container1 ul li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    min-height: 10px;
    margin: 0;
    width: 230px;
}

.inline-container1 {     
}

.inline-container1 ul
{
    list-style-position: outside;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

     .validationMessage {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #F00; 
    display: inline;
}