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.