html - Flexbox 3 divs, two columns, one with two rows

Question

I am trying to take

<div></div>
<div></div>
<div></div>

Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.

I can do this with floats, something like

.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }

But I can't seem to get it working in flexbox, is this possible?

Answer 1

The Legit Method:
*Recommended

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 300px;
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>