Html Tailwind：父母动态适应子元素的身高

我有一个图像作为标题和文本以及按钮，需要出现在标题图像的顶部.我想要实现的是，在小的媒体屏幕上，我想使图像标题的高度随着文本的高度以及按钮的高度而变化.

这基本上就是我在这里试图实现的目标.(摘自示例站点):

But my code below give me this:

    const styles = {
       backgroundImage: `url(${banner})`,
       backgroundSize: 'cover',
       backgroundPosition: 'right',
    };
<section className="container-banner relative">
            <div className='gambar h-[50vh]' style={styles} >
                <div className='absolute inset-0 bg-gray-700 bg-opacity-60 md:bg-opacity-0'>

                    <div className="flex absolute top-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:top-44">
                        <div className='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
                            <h1 className='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight '>Pakar dalam merealisasikan perabot impian anda.</h1>
                            <p className='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
                            <a href="/contact-us"><button className='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150'>Contact Us <FontAwesomeIcon icon={faAngleRight} className='text-base group-hover:translate-x-1 duration-150' /></button></a>
                        </div>
                        <div className='w-0 bg-red md:flex-1'></div>
                    </div>

                </div>
            </div>
        </section>

我try 过的一些try 和错误方法是将minHeight和MaxHeight添加到100%，但它不起作用.顺便说一句，请忽略tailwind 媒体的杂乱无章的询问，因为我还在学习回应的过程中.请帮帮我!