Aligning 3 items in 2 rows with flexbox

Question

I'm not sure if it's possible, but I'm trying to create a flexbox with three items, one big with a height of 2 rows and the others take 1 row next to it.

The desired layout (with floats)

HTML

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

CSS

.item-1 {
  float: left;
  width: 20%;
  height: 150px;
  background: red;
}

.item-2,
.item-3 {
  float: right;
  width: 80%;
  height: 75px;
}

.item-2 {
  background: green;
}
  
.item-3 {
  background: blue;
}

JSFiddle