I am currently working on creating an accordion using the following code: https://codepen.io/rafaelmollad/pen/JjRZbeW. However, I have encountered a problem where when clicking on one of the accordion items, the content expands and pushes the title upward. Upon further investigation, I found that if the accordion is not vertically centered, it works as desired, but I need it to be centered. I have tried to center the accordion container by adding the following code:
position: absolute;
top: 50%;
transform: translateY(-50%)
However, removing these lines causes the form to be positioned at the top of the page, resulting in the desired output without the container being centered.