CSS columns and margin issue

Update: The latest code which works in all browsers is located in this JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/ I am trying to make responsive columns using pure CSS approach. I have an issue where columns sometimes have gap/margin at the top. JSFiddle link to try and explore - https://jsfiddle.net/webvitaly/yu00ugft/ How to solve it? CSS: .fx-columns { background: yellow; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .fx-columns-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .fx-columns-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .fx-columns .fx-column { -webkit-column-break-inside: avoid; break-inside: avoid; background: pink; clear: both; margin-bottom: 20px; } HTML: <div class="fx-columns fx-columns-4"> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> </div> <div class="fx-column"> <h3>Header</h3> <p>Text paragraph</p> <p>Text paragraph</p> <p>Text paragraph</p> </div> </div>