Как позиционировать div так же как и на фото в CSS

Как-то так можно решить данную задачу:

html:

 <div class="container">
      <div class="item"></div>
      <div class="item"><div class="sub-item"></div>
      <div class="sub-item"></div></div>
    </div>

CSS:

 .container{
      display:flex;
      flex-flow:row wrap;
      justify-content:space-between;
      width:50%;
      margin: 0 auto;
    }

    .item:first-child{
      width:70%;
      padding:15% 0;
      background-color: lightgreen;
    }

    .item:last-child{
      width:27%;
      display:flex;
      flex-flow:column;
    }

    .sub-item{
      width:100%;
      padding:25% 0;
      background-color: lightgreen;
    }

    .sub-item:last-child{
      margin-top: 20px;
    }