Tỉ lệ giữa hai div của css Flex

🔹 Tỉ lệ 4-8 

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-1/3 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>

    {{-- Danh sách keys --}}

    <div class="w-2/3 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>

👉 Ở đây:

w-1/3 = 33% (tương đương 4/12).

w-2/3 = 66% (tương đương 8/12).

🔹 Tỉ lệ 5-7

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-5/12 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>

    {{-- Danh sách keys --}}

    <div class="w-7/12 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>

🔹 Tỉ lệ 6-6

<div class="flex gap-6 p-6">

    {{-- Form thêm key --}}

    <div class="w-1/2 bg-gray-800 p-4 rounded">

        <!-- Nội dung form -->

    </div>

    {{-- Danh sách keys --}}

    <div class="w-1/2 bg-gray-800 p-4 rounded">

        <h2 class="text-lg font-bold mb-4">Your AI Keys</h2>

        <!-- Nội dung danh sách keys -->

    </div>

</div>