Using display inline-block columns move down

You should add vertical-align: top; CSS declaration to align the columns vertically at the top:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

Here is a online demo.


Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.

The float was being used for a while, but nowadays flex box or CSS grid can be an option.