html - 要素を交換せずに左の div が残りの幅を占めるようにする

Question

2 つの div が並んでいます。右側の div の幅は固定です。ウィンドウのサイズが変更されても、左の div が残りのスペースを埋める必要があります。例：

+---------------------------------+  +---------------+
|                                 |  |               |
|             divLeft             |  |    divRight   |
|       <- dynamic width ->       |  |     120px     |
|                                 |  |               |
+---------------------------------+  +---------------+

<div>
    <div id="divLeft">...</div>
    <div id="divRight">...</div>
<div>

右の要素で float:right を使用するソリューションがありますが、次のように要素を並べ替える必要があります。

<div>
    <div id="divRight" style="float: right; width: 120px;">...</div>
    <div id="divLeft">...</div>
<div>

要素の並べ替えを必要としない解決策はありますか? それらを並べ替えると他の問題が発生する状況にあります。私はこれよりも CSS/HTML ソリューションを好みますが、Javascript/JQuery を使用することにオープンです。

これは、それを解決しようとする私の試みの機能しないJSFiddleです。青い div を緑の div の右側に配置しようとしています。