Xozin

Существует как множество готовых решений - гуглите по запросу grid, так и несколько вариантов реализации без использования сторонних ресурсов: flexbox, display: inline-block, float - расположены они в порядке моих личных предпочтений :) гуглите эти слова и разбирайтесь как работает, если вам интереснее самописный методж решения проблемы

Для того чтобы он работал правильно - нужно задать псевдоэлементу свойство display, например inline-block. То что показывается второй - это магия. Подобную магию вы сможете наблюдать, если в инспекторе хрома поставите первому псевдоэлементу насильно display: block, а потом просто уберете это свойство.