Responsive layout with two divs inside another div

Question

I have this HTML structure.

<div class="container">
    <div class="A"></div>
    <div class="BandC">
        <div class="B"></div>
        <div class="C"></div>
    </div>
</div>

I want to have the following layout if the screen width is greater than or equal to, say 800px ...

... but I want this when the width is less than 800 pixels.

The problem for me here is that B and C are in the same div. I put B and C in the same div, so that when the content overflows vertically, a scrollbar appears next to B and C.

Here is what I still have ( jsFiddle ). I used display:flexboxto move .BandC to the right, but B stays on top of C because they are in the same div.

How can I achieve this layout by allowing B and C to be in the same div? Or does it require a change in my HTML?

Answer 1

. position:absolute, C div.

jsFiddle