Two uneven columns in one row layout with identical height

Question

I've been trying to create a simple (on paper) layout for a few days, but I cannot manage to get what I actually want.

Here's my current code:

<div class="mx-auto inline-flex items-center gap-8">
        <!-- Left part -->
        <div>
            <div
                class="flex snap-x snap-mandatory gap-8 overflow-x-auto py-4 child:snap-start"
            >
                <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8">
                    <h3 class="text-xl font-medium">My card 1 title: a short text</h3>
                    <p class="text-lg text-gray-200">
                        This is a long description text that takes about two lines on a regular 1080p screen
                    </p>
                </div>
                <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8">
                    <h3 class="text-xl font-medium">My card 2 title: a short text</h3>
                    <p class="text-lg text-gray-200">
                        This is a long description text that takes about two lines on a regular 1080p screen
                    </p>
                </div>
                <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8">
                    <h3 class="text-xl font-medium">My card 3 title: a short text</h3>
                    <p class="text-lg text-gray-200">
                        This is a long description text that takes about two lines on a regular 1080p screen
                    </p>
                </div>
            </div>
        </div>

        <!-- Right part -->
        <div class="aspect-square self-stretch">
            <div
                class="relative flex h-full w-full items-center justify-center rotate-12"
            >
                <div
                    style="transform: translateY(-40%);"
                    class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105"
                >
                    <img
                        src="https://picsum.photos/200?random=1"
                        alt="Card 1 icon"
                        class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105"
                    />
                </div>
                <div
                    style="transform: translate(-45%, 40%);"
                    class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105"
                >
                    <img
                        src="https://picsum.photos/200?random=2"
                        alt="Card 2 icon"
                        class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105"
                    />
                </div>
                <div
                    style="transform: translate(45%, 40%);"
                    class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105"
                >
                    <img
                        src="https://picsum.photos/200?random=3"
                        alt="Card 3 icon"
                        class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105"
                    />
                </div>
            </div>
        </div>
    </div>

Current status

The left part is okay, but I cannot manage to define the sizing of the right part correctly. Currently, it's size is 0x0 (without self-stretch). I want its height to be the same as the left part (or their container) and its width to be the same as its height (aspect-square).

Criteria of what I want

I want the right part to be sized dynamically, by getting the same height as the left part (or the container), and the width define by its ratio
It must keep this squared layout (width == height, hence aspect-square)
The left part can be as long as it wants
Both parts must not be the same width, each one should fit appropriately (see rules above)
The container can be a grid or a flexbox, it doesn't matter, what works best

Things I've tried

Grid with auto flow (leads to even columns)
Grid with 2/3 for the left part and 1/3 for the right part (closest to what I want, but not dynamic enough)
Flexbox (right part has a size of 0x0)
self-stretch for the right part, that I recently found, but despite the height being set properly, the width is 0

score -1 · Answer 1 · answered Aug 16 '23 at 11:56

-1

It is not fully clear to me what the goal here is, but from what I understand the problem now is that the left container is not the same height as the right container.

I would recommend to use grid instead of flex since grid cares about the height, which flex does not.

Here is my take on changing your code to fix the issue you are experiencing. Tailwind playground

I have added a minimum width to the right column to tell it to take up some of the space, you can adjust this to fit your needs. Hope this helps you out. Have a great day!

answered Aug 16 '23 at 11:56

Preben

279
5

Thanks for your answer! Actually, I want the opposite: the right part to size itself depending on the left part. I updated the post, sorry for the confusion – Arainty Aug 16 '23 at 12:10
Thanks for the clarification. If I now understand the goal here, I see an issue: when more text is added to the left container, it grows taller, prompting the right container to scale up. This scaling, in turn, reduces the left container's width, further increasing its height and causing the right container to scale again. This creates a continuous loop of adjustments between the two containers, making it an impractical solution to scale the right container based on the left container's width. – Preben Aug 16 '23 at 12:34
I see... What solution could be the best with the least tradeoffs? – Arainty Aug 16 '23 at 13:13
Depending on the content of the left container, you could set a max-height on it. This would prevent it from growing taller than the max-height, which would prevent the right container from scaling up. And maybe add a vertical scrollbar to the left container to allow the user to scroll through the content if there is a lot of text in the left container, this might be the best solution. – Preben Aug 17 '23 at 05:23

Two uneven columns in one row layout with identical height

Current status

Criteria of what I want

Things I've tried

1 Answers1