divでNカラムでいらいらしない方法

ようやくしっくりくるやり方が見つかった。

<div style="display: table; table-layout: fixed; width: 100%; border: 1px solid #CCC">
        <div style="display: table-cell; width: 100px; border: 1px solid #CCC">
            固定幅の何か
        </div>
        <div style="border: 1px solid #CCC">
            長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文長文 長文
        </div>
        <div style="display: table-cell; width: 100px; border: 1px solid #CCC">
            固定幅の何か 画像など
        </div>
    </div>

参考
固定と可変で作る。スマホサイトで片方を横幅可変にするやり方