<div class="flex-container">      
<div class="flex-item"><p>1</p></div>     
<div class="flex-item"><p>2</p></div>      
<div class="flex-item"><p>3</p></div>      
<div class="flex-item"><p>4</p></div>  
</div>

.flex-container{
display:flex;
background: blue;
}

.flex-item{
flex: 1 1 0;
background: pink;
margin:10px;
}

.flex-item:nth-child(4){
flex-grow:6;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.