Html – I have some dropdowns inside a section, and when the dropdown is expanded, the section that the dropdowns are inside does not expand to fit the text

https://codepen.io/buttadogg_/pen/WbeZvjg

<section>
        <h1>Here’s The Basics!</h1>
        <div class="dropdowns">
            <div class="dd1c">
                <button class="dropdown dropdown1">Sydney's Public Transport & How To Use Them!</button>
                <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
                <div class="dd1cdrop ddcdrop"></div>
            </div>
            <div class="dd2c">
                <button class="dropdown dropdown2">Finding a Doctor or Medical Service / OSHC</button>
                <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
                <div class="dd2cdrop ddcdrop"></div>
            </div>
            <div class="dd3c">
                <button class="dropdown dropdown3">Understanding Your Housing/Accomodation Rights</button>
                <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
                <div class="dd3cdrop ddcdrop"></div>
            </div>
            <div class="dd4c">
                <button class="dropdown dropdown3">Working in Sydney & Finding A Job</button>
                <img src="images/chevron-down.svg" alt="" class="dropdownarrow">
                <div class="dd3cdrop ddcdrop"></div>
            </div>
        </div>
    </section>



section:first-of-type {
    padding-top: 1.5vw;
    min-height: fit-content;
    z-index: revert-layer;
}

When the dropdown is expanded, the text just overlaps the second section and header. I want the section in which the dropdowns are to expand to fit the content of the dropdown, and then shrink back down.

Also, there is overlapping styles in the css because there is two files linked to the html, so i just added both of them to the codepen.

So far, I have tried to change the min-height, removing the min-height entirely, using a max-height, using margin,setting the display to flex, removing the z-index, but i got the exact same result, no change at all.

I do not get any error messages, so im assuming it has nothing to do with the javascript.