Safari inline-block fix for CSS columns layout

The problem

Using css columns property gives us different results for Chrome and Safari. Check below gif file.

Look closely to the above gif file and you’ll see the border positions differently if we toggle display: inline-block rule. In this case, border-bottom for last child of the left column goes above the first child of the right column. This issue only occurs in Safari browser.

The finding

Border bottom works incorrectly in Safari while using CSS columns for layout.

The fix

Use display: inline-block along with the border-bottom rule.