Float right changing position of next element

I have a simple HTML, one parent div, and two children. When I am styling one child with float set to right, the next child goes up and the margin-top doesn't apply to it, which I don't want.

Here is the sample code.

.inner1 {  width: 50%;  height: 100px;  border: 5px solid red;  float: right;}

<div class="outer"><div class="inner1"></div><div class="inner2">Text that goes up after float.</div></div>

Can someone please suggest how to handle this situation?

Here is the JSFiddle

I want the output to be something like