CSS Flexbox : How to construct a specific layout

Question

Following divs have to be created using flexbox , on condition that 3 of them should be siblings ( can not use two wrappers for each column ).

Anyone have an idea how to make this using pure flex ?

My current trial:

HTML:

       <div class="meeting-room-wrap">
            <div class="observable-module">
            </div>
            <div class="observable-module">
            </div>
            <div class="active-module">
            </div>    
        </div>

CSS:

.meeting-room-wrap
{
    display: flex;
    flex-direction: row
}
.observable-module
{
    flex-grow:1;
    height: 50%;
    min-width: 50%;
}
.observable-module:nth-child(1) /* div #1 */
{
        background: green;
        order : 1;

}
.observable-module:nth-child(2) /* div #3 */
{
        background: blue;
        order : 3;
}
.active-module  /* div #2 */
{
    flex-grow:1;
    height: 100%;
    min-width: 50%;
    background: red;
    order : 2;

}

Answer 1

Wrapped Left Column Option

The left divs in a flex column would the the most obvious approach...absent the given constraint.

.meeting-room-wrap {
  display: flex;
  height: 300px;
  background: #c0ffee;
  width: 80%;
  margin: 1em auto;
}
.observable {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.observable-module {
  flex: 1;
  background: #bada55;
}
.observable-module:nth-child(2) {
  background: rebeccapurple;
}
.active-module {
  flex: 1;
  background: green;
}

<div class="meeting-room-wrap">
  <div class="observable">
    <div class="observable-module">
    </div>
    <div class="observable-module">
    </div>
  </div>
  <div class="active-module">
  </div>
</div>

Flex-column Option ...no extra wrappers required.

* {
  margin: 0;
}
.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  background: #c0ffee;
  width: 80%;
  margin: auto;
  color: red;
  Font-size: 36px;
}
.alpha,
.gamma {
  flex: 0 0 50%;
  width: 50%;
  background: #000;
}
.beta {
  background: #bada55;
  order: 2;
  flex: 0 0 100%;
  width: 50%;
}
.gamma {
  background: plum;
}

<div class="wrap">
  <div class="alpha">ONE
  </div>
  <div class="beta">TWO
  </div>
  <div class="gamma">THREE
  </div>
</div>