[解決済み】コンテナの残りの幅を埋めるスタイル入力要素

質問

例えば、次のようなhtmlスニペットがあるとします。

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

これは私の正確なコードではありませんが、重要なことは、固定幅のコンテナの中に、ラベルとテキスト入力が同じ行にあるということです。 ラベルのサイズを知らずに、入力が折り返さずにコンテナの残りの幅を埋めるようにするには、どうすればよいでしょうか？

どのように解決するのですか？

レイアウトのためのテーブルを嫌う人は多いですが、このような場合、明示的なテーブルタグを使用するか、display:table-cell を使用すると便利です。

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>