How to flow text from DIV to DIV?

Question

I have two DIVs with absolute position on two sides of a HTML page such as (EXAMPLE)

<div class="left">
</div>
<div class="right">
</div>

with CSS

.left{
    position:absolute;
    left:10px;
    top:10px;
    width:100px;
    height:100px;
    background:red;
}
.right{
    position:absolute;
    right:10px;
    top:10px;
    width:100px;
    height:100px;
    background:blue;
}

Is there a way to add text to the left DIV and flow excess text to the right one? I am not stuck to this two DIV, and I'm just looking for a solution to flow excess text to another position.

NOTE: I hope to find a pure CSS solution, though, it seems to be improbable; then, I am looking for a pure javascript solution (not using JS libraries).

Answer 1

CSS Regions (still a 'draft', but) is aiming to fix this problem:

The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.

More info and tutorials at https://www.adobe.com/devnet/archive/html5/articles/css3-regions.html