How can I wrap text around stacked elements (ie elements with negative margins)?

Question

I'm hope someone can help me with this.

I would like to wrap text around multiple stacked floated elements, however when I am adding a negative margin to the second element the text does not play ball (see below)...

Does anyone have a solution that can help me with this?

Thanks in advance!

What I've done so far here:

<style>
.elements {
    float:left;
    padding:10px;
    width:50%;
    background:#039;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    padding:50px;
    box-sizing:border-box;
    margin-right: 20px;
    position: relative;
}

#element-two {
    margin-top:-50px;
    background:#900;
    margin-left:30px;
}
</style>


<div id="post">
<div id="element-one" class="elements">Element 1</div>
<div id="element-two" class="elements">Element 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id dictum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus vitae leo dictum, <br>
<br>
<br>
porttitor augue ut, accumsan nunc. Phasellus at malesuada orci, quis varius nulla. Nullam dui purus, elementum non fermentum eu, 
laoreet ac massa. Maecenas dictum elit sit amet mi pretium tincidunt. Maecenas interdum elementum lectus, eu aliquam nibh lacinia nec. 
<br><br><br>
Quisque facilisis accumsan blandit. Mauris eget pulvinar lacus. Donec pretium posuere mattis. Suspendisse et tempor orci, sit amet placerat neque. Etiam laoreet massa eu libero posuere, sit amet laoreet metus auctor.

</div>

How I would like the page to look

How the page looks as it is

Answer 1

Hope this helps.

 `https://jsfiddle.net/0zf7rxpn/1/`

In short, I put the negative margin-bottom to the blue element, so the red element went up. Then to the red element I gave some margin-right, position: relative and negative right.