Vertical align middle and float right left div within div

I am trying to vertical align two divs inline in a parent div.

See:

https://jsfiddle.net/xh8rbnmh/

The vertical align is straight forward, but I am also trying float the divs, one left and one right inline.

Is this possible to do?

Html:

<div class="outer">
  <div class="ier_right">
    RIGHT MIDDLE
  </div>
  <div class="ier_left">
   LEFT MIDDLE
  </div>
</div>

CSS:

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
}
.ier_right {
  background: blue;
  float: right;

}

.ier_left {
  background: yellow;
  float: left;
}