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