title: How can I get two divs of different heights always side-by-side, with text appearing directly below the 1st div and never overlapping the 2nd div?
body: <p>This is a bit fiddly, but I'll try to explain it.
  What I'm trying to get working with CSS is:</p>
  <ol>
  <li>Two divs at the top of the page (&quot;A&quot; and &quot;B&quot;), side-by-side with a fixed width of combined 400px (if the window is too narrow to see both, then a scrollbar should appear, I do NOT want one div jumping beneath the other)</li>
  <li>Those two divs can be of different heights, though - sometimes div A will be higher, sometimes div B.</li>
  <li>I want some long text to appear directly beneath div A. If div B is higher than div A, then the text should flow around div B.</li>
  <li>The text should display no wider than 400px, but if the window is narrower, then it should display as narrowly as needed. The text should be no wider than the viewport.</li>
  </ol>
  <p>So to summarize, I want the two side-by-side divs on top to display the same way regardless of how narrow the window width is, but the text below div A to be responsive to the window width (and also not to overlap div B, if div B drops down further than div A).</p>
  <p>Here's some code that isn't the right approach, but shows partly what I'm going for:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.all {
    max-width:400px;
  }
  .header div{
      display:inline-block;
      vertical-align:top;
  }
  .header{
      white-space: nowrap;
      padding: 0px;
      height: 36px;
  }
  .A{
      background-color:red;
      width: 195px;
      margin-right: 5px;
  }
  
  
  .B{
      width: 195px;
      margin-left: 5px;
      background-color:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="all"&gt;
  &lt;div class="header"&gt;&lt;div class="A"&gt;Text1&lt;/div&gt;&lt;div class="B"&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
  This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.&lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Here's the same on JSFiddle: <a href="https://jsfiddle.net/ur60tdxy/1/" rel="nofollow noreferrer">https://jsfiddle.net/ur60tdxy/1/</a></p>
  <p>What doesn't work here is that the long text overlaps div B (the blue one), and also it doesn't allow for div A to be different heights (it just displays 36px below the top rather than immediately below div A, whatever its height).</p>
  <p>Any help would be much appreciated.</p>
  <p>EDIT: Here's a second version, which behaves as I want except I want the two divs to remain side-by-side when the window is too narrow:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.all {
    max-width:400px;
  }
  .A{
      background-color:red;
      width: 190px;
      margin: 5px;
    float: right;
  }
  
  
  .B{
      width: 190px;
      margin: 5px;
      background-color:blue;
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="all"&gt;
  &lt;div class="B" style="float: right;"&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;Text2&lt;br/&gt;&lt;/div&gt;
  &lt;div class="A"&gt;Text1&lt;/div&gt;
  This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <a href="https://jsfiddle.net/ur60tdxy/2/" rel="nofollow noreferrer">https://jsfiddle.net/ur60tdxy/2/</a></p>