Modal with <li> <ul> doesn't align (CSS GRID)

HTML-CSS
1

I’m using a perfectly working modal from here,

Now in this modal I would like to align the top 4 (naam, veg/vl, productie, extra as example) as table headers and the other should auto flow below it. Some elements listen to its parent others don’t.

https://codepen.io/QDW/pen/roOENp

2

Anybody any clue in how to achieve this?

3

You could use a table instead of a list.
tables