Creating A Two Column Layout With Flexbox

This is what I am looking to achieve within the layout (excluding nav and footer) I am having quite a lot of trouble re-doing this website. It was hardly being responsive so I hav

Solution 1:

Here is a simple layout using flexhttps://jsfiddle.net/ynnvddLk/

html

<divid="app"><divclass="vd-grid-left-col"><divclass="main">
      main
    </div><divclass="vd-grid-sub-box">
      sub
    </div><divclass="vd-grid-sub-box">
      sub
    </div><divclass="vd-grid-sub-box">
      sub
    </div></div><divclass="vd-grid-right-col"><divclass="feature">
      feature
    </div><divclass="feature">
      feature
    </div></div></div>

css

div{
  margin:2px;
}
#app{
  display:flex;
}
.vd-grid-left-col{
  display:flex;
  flex-wrap:wrap;
  flex-basis:70%;
  justify-content:space-between;
}
.main{
  width:100%;
  background-color:blue;
}
.vd-grid-sub-box{
  background-color:red;
  flex-grow:1;
}

.vd-grid-right-col{
  display:flex;
  flex-direction:column;
  flex-basis:30%;
}
.feature{
  width:100%;
  background-color:grey;
}