Float right changing position of next element

Question

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

Answer 1

Try this code:

.outer{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
      }
.inner1 {
         width: 50%;
         height: 100px;
         border: 5px solid red;
        }
.inner2{
       width: 50%;
  }

<div class="outer">
<div class="inner1">

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