Как разделить промапленные элементы на 2 строки ReactJS

Подскажите пожалуйста что делать. Я получаю получаю элементы с бэка и с помощью .map() вставляю их. Мне нужно сделать что бы они делились на 2 равные колонки, но что бы я не делал, оно все время выглядит ужасно. Я Задавал в стилях

1. Column: 2; (В Данном случае при уменьшении экрана, надписи плывут) (Прикреплю скрин)
2. Display: grid; (Но так как все надписи разного размера, то все верстка выглядит странно)(Так же прикреплю скрин)
3. Display: flex; (Та же проблема что и с grid) Как мне стилизировать их как на дизайне? (Скрин дизайна так же прикреплю)

Важный момент компоненты использую от UI библиотеки Mantine.