Horizontal masonry layout with left to right scroll

I try to do horizontal masonry for list of elements example of design with different width of each element, but I need right order like I make in codepen example and also its important to columns be a flexible width (like in design). If it's possible to make it with only pure css without JS. Maybe someone could help me to do this, please

masonry-with-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100px;
} 

Here codepen https://codepen.io/lokolin/pen/abGNrbz