CSS float masonry

Question

I'm creating a layout with the five (or more) containers where the first container is full width and the rest take up 50% and stack below each other with a masonry-like layout.

To keep things simple, I'm trying to achieve this with floats but as the content won't have a consistent depth the content doesn't wrap properly, so this may not be the best idea:

.post {
  box-sizing: border-box;
    width: 50%;
    margin: 0 0 40px;
    padding: 0 2.5%;
    display: inline-block;
    float: left;
  background-color: #eee;
}
.post:first-of-type {
    width: 100%;
    display: block;
    padding: 0;
}

https://codepen.io/anon/pen/YvwXYB

Ideally the second/fourth divs would be stacked vertically on the left and the third/fifth divs would be on the right. We can't add a class to the first div, so looking for a solution. Any ideas?

Answer 1

Wrap a container-div around it and use flex-boxes. Give the first item a flex: 1 100% and voilá.

https://codepen.io/anon/pen/xzZGaJ

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .post:first-child {
  flex: 1 100%;
}

.post {
  box-sizing: border-box;
    width: 50%;
    margin: 0 0 40px;
    padding: 0 2.5%;
    display: inline-block;
  background-color: #eee;
}