Edit in JSFiddle

<div class="wrap">
    <div class="leftbox">
        <div class="item">item L1</div>
        <div class="item">item L2</div>
        <div class="item">item L3</div>
    </div>
    <div class="rightbox">
        <div class="item">item R1</div>
    </div>
</div>

/*
 * [ flex-direction : ]
 *
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 */

/*
 * [ flex: (flex-grow) (flex-shrink) (flex-basis) ] 
 *
 * ex => flex: 2 2 10%
 *
 * [ ** flex: ***   ] https://developer.mozilla.org/en-US/docs/Web/CSS/flex
 * [ flex-glow:     ] https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
 * [ flex-shrink:   ] https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
 * [ flex-basis:    ] https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
 */

/*
 * [ justify-content: ] https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 */

/**************************************************************************************************************
***************************************************************************************************************
**************************************************************************************************************/

.wrap{
    display:flex;
    background:#34495e;
    flex-direction:row;
    padding:20px 20px;
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.item{padding:10px;margin-bottom:10px;color:#fff;}
.item:last-child{margin-bottom:0;}
        .leftbox .item{background-color:#e74c3c;}
        .rightbox .item{background-color:#2980b9;}

/*display:flex와 column사용시 마진이 안겹침*/
.leftbox{
    display:flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding-right:10px;
}
.leftbox .item{
    flex-grow: 1;
}
.rightbox{
    display:flex;
    flex-grow: 3;
}
.rightbox .item{
    flex-grow: 1;
}
































*{box-sizing:border-box;}
body{background-color:#eee; display:flex; flex-direction:column; justify-content: center; height:100vh; overflow:hidden;}