html - 純粋な CSS 動的 2 列の画像/テキスト

Question

私のレイアウトは次のようなものです：

<section class="container">
  <div class="picture-div">
    <figure><img src="blah"></figure>
    <figure><img src="blah"></figure>
    ...
  </div>
  <div class="text-div">
    <p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
    <p>Text which could be very very very very very very very very very very very very very very very very very very long</p>
    ...
  </div>
</section>

picture-div と text-div の両方に、コンテンツに応じた動的な幅があります。ピクチャ div の最小幅は 500 ピクセル、テキスト div の最小幅は 300 ピクセルです。

次のルールに一致する動的効果が必要です。

1. コンテナに続く要素は、フロートをクリアし、コンテンツをコンテナ要素の下に完全に配置する必要があります。
2. ビューポートの幅が十分でない場合は、container、picture-div、または text-div 要素ではなく、常に HTML 要素に水平スクロール バーを配置する必要があります。
3. コンテナーの幅が (picture-div の幅 + 300px) を超える場合、text-div は picture-div の右側にフロートし、コンテナーの左側のスペース全体を占有します。(例: コンテナの幅が 2000px で、picture-div の幅が 800px の場合、picture-div は 800px、text-div は 1200px になります。)
4. コンテナーの幅が (picture-div の幅 + 300px) を超えない場合、text-div はフローティングせず、picture-div と text-div の両方がコンテナーのスペースを占有します。(例: コンテナの幅が 1000px で、picture-div の幅が 800px の場合、picture-div と text-div の両方が 1000px になります)

これに対する純粋な CSS ソリューションはありますか?