See the following codepen for what I currently have: https://codepen.io/anon/pen/GjWYPO
-
.container{
display:flex;
}
.container > div{
flex-grow:1
}
[class|="col"] {
display:inline-block;
vertical-align: top;
position:relative;
font-size:20px;
}
.col-1-3{
}
.col-2-3{
}
.col-1{
}
.bg-blue{
background-color:#42a5f5;
color:#ffffff;
}
.bg-green{
background-color:#66bb6a;
color:#ffffff;
}
.bg-green+ .bg-green{ margin-left:20px}
blue left
green 1
green 2
green 3
blue right
Something like this?
This is using flexbox layout. If you want more browser compatibility then I think a good option would be use any css framework.