Как сделать чтобы блок снизу опускался ниже разворачиваемого блока?

        let coll = document.querySelector('.collapsible');

        coll.addEventListener('click', function () {
        // Добавляем класс, который разворачивает кнопку
        this.classList.toggle('rotate-x');
        this.classList.toggle('active');

        let content = this.nextElementSibling;

        if (content.style.maxHeight) {
        content.style.maxHeight = null
        } else {
        content.style.maxHeight = content.scrollHeight + 'px'
        }
    });

.portfolio {
    height: 100vh;
    margin-top: 50px;
    &-textm {
        margin: 0;
        text-align: center;
        font-size: 72px;
        margin-bottom: 50px;
    }
    &-item {
        width: 1110px;
        height: 250px;
        box-shadow: 0px 0px 25px 0px rgba($color: #000000, $alpha: .2);
        border-radius: 25px;
        margin: 15px;
        margin-left: 0px;
    }
    &-img {
        border-radius: 25px;
        float: left;
        margin: 25px;
        box-shadow: 0px 0px 25px 0px rgba($color: #000000, $alpha: .2);
    }
    &-text {
        margin: 0;
        padding: 25px 0px 20px;
        font-size: 24px;
    }
    &-description {
        margin: 0;
        margin-right: 25px;
        font-size: 17px;
    }
    &-btn {
        float: left;
        margin-top: 20px;
        padding-top: 5px;
        padding-bottom: 6px;
        padding-left: 17px;
        padding-right: 14px;
        background-image: url('/img/btn2.png');
        background-repeat: no-repeat;
        font-size: 16px;
        color: rgb(255, 255, 255);
        :hover {
            transition: 0.5s;
            color: #f3f3f3;
            text-shadow: 0px 0px 25px rgb(0, 0, 0);
        }
    }
}

.collapsible {
    transition: transform .5s;
    display: block;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: none;
    outline: none;
}

.rotate-x {
    transform: rotateX(180deg);
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.order {
    max-width: 100%;
    height: 100vh;
    background-image: url('/img/Order.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-top: 50px;
    h1 {
        font-size: 72px;
        font-weight: bold;
        color: #545454;
        text-align: center;
    }
    h3 {
        margin-top: 30px;
        font-size: 22px;
        font-weight: 600;
        color: #545454;
    }
}

    <div class="portfolio">
        <a name="portfolio"></a>
         <div class="wrapper">
             <h2 class="portfolio-textm">Портфолио</h2>
             <div class="portfolio-items">
                 <div class="portfolio-item">
                     <img src="/img/Porsche 912.png" alt="" class="portfolio-img">
                     <h3 class="portfolio-text">Landing page для Porsche</h3>
                     <p class="portfolio-description">Porsche 911 - спортивный автомобиль производства немецкой компании Porsche AG в кузове двухдверное купе или кабриолет.<br>Сайт был разработан в качестве примера для портфолио и не является официальным сайтом Porsche.</p>
                     <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                 </div>
                 <div class="portfolio-item">
                    <img src="/img/Car repair.png" alt="" class="portfolio-img">
                    <h3 class="portfolio-text">Landing page для Autosimple</h3>
                    <p class="portfolio-description">Autosimple - это небольшая станция технического обслуживания (СТО) в городе Златоуст, Челябинской области. Она занимается обслуживанием автомобилей и предлагает различный спектр услуг.</p>
                    <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                </div>
                <div class="portfolio-item">
                    <img src="/img/Detail.png" alt="" class="portfolio-img">
                    <h3 class="portfolio-text">Landing page для детейлинг центра</h3>
                    <p class="portfolio-description">Детейлинг центр - это комплекс услуг, который включает в себя работы по тщательному профессиональному уходу за интерьером и экстерьером автомобиля.<br>Данный сайт не принадлежит никакой компании.</p>
                    <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                </div>
                <button class="collapsible"><img src="http://svgur.com/i/dAg.svg" alt=""></button>
                <div class="content">
                    <div class="portfolio-item">
                        <img src="/img/Detail.png" alt="" class="portfolio-img">
                        <h3 class="portfolio-text">Landing page для детейлинг центра</h3>
                        <p class="portfolio-description">Детейлинг центр - это комплекс услуг, который включает в себя работы по тщательному профессиональному уходу за интерьером и экстерьером автомобиля.<br>Данный сайт не принадлежит никакой компании.</p>
                        <a class="portfolio-btn" href=""><span>Подробнее</span></a>
                    </div>
                </div>
             </div>
         </div>
    </div>
    <div class="order">
        <a name="order"></a>
        <div class="wrapper">
            <h1>О заказе</h1>
            <h3>1. Если Вы хотите заказать сайт, то пожалуйста<br>напишите нам на <a href=""><span style="color:#00A3FF;">почту</span></a> или в <a href=""><span style="color:#FFB800;">инстаграмм</span></a>.</h3>
            <h3>2. Для заказа понадобиться развёрнутое<br>техническое задание, наши менеджеры отправят<br>его пример Вам на <a href=""><span style="color:#00A3FF;">почту</span></a> или в <a href=""><span style="color:#FFB800;">инстаграмме</span></a>.</h3>
            <h3>3. После согласования тех. задания, мы<br>договоримся с Вами о цене. Если она Вас<br>устроит, то мы отправим Вам договор об<br>оказании услуг.</h3>
            <h3>4. После подписания договора, Вы должны<br>будете внести предоплату от 50%, после<br>этого мы начнём выполние вашего заказа.</h3>
        </div>
    </div>