Dima Polos

before/after

https://www.youtube.com/watch?v=X7IBa7vZjmo
Это может помочь

Специфичность

Мой сетап. Попробуйте.

Стройте сетку.
Почитайте статьи на тему "сетка в верстке", в таком духе. Гриды, конечно, хорошо, но и на флексах есть сетки. Возьмите исходники бутстрап 4, посмотрите там, как правильно сказали в комментариях - поймите суть.
UPD: сетка.

Это же бордер

:focus

Это список. Тегу ul задаете скругление и бордеры слева и снизу. Псевдоэлементом делаете стрелку позиционируете внизу справа, паддингами защищаете пространство внизу родителя.
Элементам списка - li - даете нужное оформление, внутри делаете тег с датой, и его позиционируете относительно тега li, выносите его на границу родителя, даете скругление 50%, границу и фон и все остальное.

W3C spec