How to display fields from the loop in two separate divs

I’m making this website where i’m displaying things in two colums: on the left, a list of titles, when you click them, it expands a text and on the right it show the corresponding images.
To do so, I use a css grid.
Here is my code that I use to generate my blog posts and display the corresponding images.
My issue there is that .four is supposed to be on the left, that is correct, and .five should be on the left, but it’s not since .five is generated under .four (left). How can I write this correctly so .five is not a child of .four and stays a child of my .wrapper but is keeping the id() order fine?

HTML code in Custom field

I’m using a custom field to display images in a slider on each post, but when I update the post after having entered the HTML code in the custom field, the code disappears. I’m assuming that there is some kind of filter that removes HTML code from custom fields when a post is saved. Is there a way to circumvent that without using a plugin?