Accordions open at bottom or middle of content

I am using accordions for a new site and have used CSS code to make sure the first one is closed when you open the page and also one to have them auto close when opening the next accordion. My issue is when you open a subsequent accordion it opens in the middle or at the end of the content when you move from top to bottom the accordion list. If I start at the bottom of my list of accordions, it works fine. I have a lot of content (multiple articles of varying length). Here is the code that I am currently using for both actions:

.elementor-accordion > div:first-of-type { display:none;}

Does anyone know how to get each accordion to open at the top? Do I need to move to Javascript?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)