Это называется схлопывание и выпадение вертикальных margin.
Такого эффекта нет в гридах и флексах. И тогда margin меняется на gap.
Также можно задать границу или паддинг для родителя. Можно в 1px.
Городить для этого before и after скорее перебор.
Начать нужно с понимания того, что у вас вообще запрещен перенос. У флекса по умолчанию flex-wrap: nowrap
Т.е. сначала нужно этот перенос разрешить.
А потом сделать так, чтобы в строку помещалось только 2 элемента. Шириной родителя или шириной элементов.
Возможно, более удобный вариант это гриды и grid-template-columns: 1fr 1fr или другие нужные вам значения.
Значит, нужно это куда-нибудь опубликовать, чтобы можно было показать.
Идеальный вариант github с кодом и github pagesс опубликованной версией