html - フォームに動的にサイズ変更された入力要素を含むインライン ラベルの配置

Question

ラベルタグにいくつかの入力タグを含むフォームがあります。入力はラベルの下に表示されます。フォームの幅に基づいて入力/ラベルのサイズを動的に変更したい。問題は、ラベルにフォームの幅の 100% を占めるように指示すると、最後の入力ラベルが下の行に入ることです。

これが私のコードの例です：

    <form action="">
        <label>Label1:<br>
            <input type="text"></label>
        <label>Label2:<br>
            <input type="text"></label>
    </form>

CSS の一部を次に示します。

    form {
        width:60%;
        border:1px solid indigo;
    }
    label{
        display:inline-block;
        margin:0;
        width:50%;
    }
    input{
        width:100%
    }