I have something similar to accordion in vuejs, when i click on it, it shows specifications, when i click again on it, it hides the specifications, its working fine on desktop, but on mobile screen the div opens upward/upside, don’t know why. I need that it should open downward. I can’t given static height, as the data is dynamic.

Below is my code:

<template>
    <div
        class="bg-white border boder-light  px-4 relative"
    >
        <div @click="show = !show" class="py-3 cursor-pointer">
            <h1 class="text-xl m-0" :class="[show ? 'text-black' : 'text-blue-600']">{{getLabel('Specifications')}}</h1>
            <div class="text-primary text-[25px] absolute top-4 right-8">
                <i v-if="!show" class="fa fa-angle-down"></i>
                <i v-else class="fa fa-angle-up"></i>
            </div>
        </div>
        <div :class="{'flex': show, '!hidden': !show}" class="row gy-1 mb-4 cursor-default">
            <hr class="my-[9px] bg-gray-400" />
            <dl class="custom-columns">
                <template v-for="(item, innerIndex) in data" :key="innerIndex">
                    <div>
                        <dt class="text-gray-500 text-base font-normal">{{ getLabel(item.title) }}</dt>
                        <dd class="text-md py-1 text-sm vehicle-details-span" v-if="item.value">{{ getLabel(item.value)}}</dd>
                        <dd class="text-md py-1 text-sm vehicle-details-dash-span" v-else>-</dd>
                    </div>
                </template>
            </dl>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import {
        getLabel as getLabelHelper, checkIfInputIsOptional as checkIfInputIsOptionalHelper
    } from "../Utils/helper.js"
    export default {
        props: {
            data: {
                type: Array,
            },
        },
        data() {
            return {
                show: false,
            }
        },
        computed:{
            ...mapGetters(["allLabels"]),
            ...mapGetters(["selectedLang"]),
        },
        methods:{
            getLabel(currentLabel) {
                return getLabelHelper(currentLabel, this.allLabels)
            },
            checkIfInputIsOptional(currentLabel) {
                return checkIfInputIsOptionalHelper(currentLabel, this.allLabels)
            }
        }
    }
</script>

On Desktop sreen, div opens downward, but on mobile div opens upward, page doesn’t scrolls, user stays where he was, the only problem is it should open downwards.

please check my above code, i have tried several different things, but nothing worked.