angular2 fxFlex design not working with variable height of div

Question

<md-card class="card-demo">
  <md-card-content>
    <div fxLayout="row wrap" fxFlex="100" flex fxLayoutAlign="stretch flex-start">
      <div style="display: block;" fxLayout="row wrap">
        <div class="three div" fxFlex="50">
          1 1 1 1 1 1 1 11 1 1 1 1 1 1 1 1 1 1 1 1 1
        </div>
        <div class="one div" fxFlex="50">
          2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
        </div>
        <div class="two div" fxFlex="50">
          3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
        </div>
      </div>
    </div>
  </md-card-content>
</md-card>

I want to display display the three div as shown in the code but want to remove the space below the first div and display the second div just after the first.

please see the stackblitz https://stackblitz.com/edit/angular-yevc8p?embed=1&file=app/app.module.ts

Please Note.

1. its is a dynamic structure of html.
2. width of the column will be decided at run time (i have static width 50% in example for div).
3. so html structure i can't change but i can add attribute or css.this is the design we have right now and i want to remove the white space and start the 3rd div just after the 1st.
4. I can't change the row and column structure because of the dynamic structure.