I need some assistance with my Next.js 13 and Tailwind website. I am currently facing an issue with flexbox sizing that I can't seem to figure out. My objective is to have two FlexboxItems with equal width on medium and larger screens, and equal height on smaller screens. The one with the width on larger screens seems to be working fine, but on smaller screens, the items are not of the same height.
<div className=" bg-slate-500 min-h-screen flex md:flex-row flex-col">
<div className="bg-orange-400 flex-1 flex flex-col justify-center content-center flex-wrap text-4xl">
<h1>Text</h1>
</div>
<div className="bg-lime-500 flex-1 flex flex-col justify-center">
<Image
src={FreeSquareImg}
alt="Sample"
className="rounded-3xl"/>
</div>
</div>