如何使用CSS多列布局解决顶部对齐问题

Question

我在使用CSS multicol对齐每列顶部时遇到问题。

我尝试将margin-top: 0;添加到h2和p标签中，但这确实做到了。我也尝试过：

.col-container > * {
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}

和：

.col-container > * {
  display: inline-block;
  width: 100%;
}

没有运气。

https://codepen.io/joeymorello/pen/GbeyWB?editors=1100

我已经在chrome，firefox和edge中对其进行了检查。全部显示每列的顶部对齐方式关闭