How to fix top alignment issue using CSS multi-col layout

Question

I am having issues aligning the top of each column using css multicol.

I have tried adding margin-top: 0; to h2 and p tags but that did seem to do it. I have also tried:

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

and:

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

with no luck.

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

I have checked it in chrome, firefox, and edge. All showing the top alignment of each column to be off