Accordion Dropdown Position Fix

My accordion section is built with plain HTML and, when opened, it simply drops over the paragraphs that sit below it. Instead, I want each panel to expand naturally and push the rest of the page down so no text is ever hidden.

You are free to introduce lightweight CSS or a small JavaScript / jQuery snippet—whatever is simplest and most reliable—to keep the accordion fixed in the document flow. I don’t need fancy animations; the priority is that every click expands the section, reveals the content, and moves everything else beneath it accordingly.

Please send back the updated HTML (plus any accompanying CSS / JS) with clear comments so I can slot it straight into my site. A quick screen-grab or short GIF showing the corrected behaviour would be a bonus, but the core deliverable is working code that pushes, not overlays.