Tailwind grid not working

Hi, I do not know if this forum is meant for this, but after seeing the tag 'Design', I am just shooting my shot.

I’m trying to create a responsive grid layout using Tailwind CSS where a “Node Configuration Form” takes up 2/3 of the screen, and a “Summary Card” takes up 1/3. However, my current layout isn’t working as expected; both components are either the same width or not properly aligned. I've tried a lot of grid system codes, but I just get them next to eachother or they are going underneath eachother.

Can someone see what I am doing wrong?

<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <!-- Grid Container for the Two Components -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Node Configuration Form (2/3 of the screen) -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold">Configure</h2>

                <!-- Other Form Fields Here -->

            </div>
        </div>

        <!-- Summary Card (1/3 of the screen) -->
        <div>
            <div class="bg-white p-6 rounded shadow">
                <div class="text-center">
                    <h3 class="text-lg font-bold text-black">Summary</h3>
                </div>

                <!-- Summary Details Here -->
                <div class="cart-item py-4 border-b border-grey-100">
                    <div class="flex justify-between">

                    </div>
                </div>

                <!-- More Summary Fields Here -->
            </div>
        </div>
    </div>
</div>