title: How to make boxes of different size float to each other and fill available space (responsive solution needed)?
body: <p><em>Using flex</em></p>
  
  <pre><code>.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  .box {
    width: 46%;
    flex-grow: 1;  
  }
  </code></pre>
  
  <p>gets the next picture:
  <a href="https://i.stack.imgur.com/kLSQv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kLSQv.png" alt="enter image description here"></a></p>
  
  <p><em>Using floating</em></p>
  
  <pre><code>.container {
    overflow: hidden;
  }
  
  .box {
    display: inline-block;
    float: left;
  }
  </code></pre>
  
  <p>gets me the next picture:
  <a href="https://i.stack.imgur.com/t3SJn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t3SJn.png" alt="enter image description here"></a></p>
  
  <p>The task requires that there would be no vertical spaces between boxes (how it is in the first column with flexbox or in the second column with floating), so the boxes float to each other filling ALL available space.
  Boxes widths are the same, but boxes heights differ.
  Should be responsive, so the 2 columns get into one when viewport shrinks.
  Appreciate any help or hints.</p>
  
  <p>UPDATE: I would like to explain why the solution <a href="https://stackoverflow.com/questions/43901955/create-a-masonry-grid-with-flexbox-or-other-css">here</a> (question for which is marked as duplicate) doesn't work form me – in that question, items are about the same, they are pretty much homogeneous, so they can be approximately calculated how much items goes into which column. In my example, items can be of very different sizes, so if 2 (for example) columns created, it is not clear hot to put html layout, how many divs goes into which column, so, for example, 'header 1' box can be the same height as 2-5 together – and their height is dynamic.</p>