Card width somehow is not correct

[StrangerGithuber]

Hello
I have issue with width in card. I am newbie with tailwinds but tried to do 2 cards and first card is smaller than other card.
It wouldn't be problem but the second card stays at the same place instead adjust to the first card.
It is my code:

<div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-2">
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800 xl:w-1/3">
        <ul class="overflow-hidden rounded shadow divide-y">
         
                <li  class="w-64 p-4 bg-white">
                   Menu
                </li>
          
        </ul>
    </div>
    <!-- Card -->
    <div class="flex items-center bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div>
            zrzrt
        </div>
    </div>
    </div>

Preview:

I don't know how to put the second card near to the first card. There is a big gap. It is recognized as if the first card is similar size as the second card.
How I can fix this?

[NovusOpus]

The reason you seeing that gap is because of this: xl:w-1/3, since you have 2 Columns in the grid pass the md: breakpoint, Each one have the same width 50 -50%, so xl:w-1/3 is applied inside the first column, the gap you see is the other 2/3 of the first column.

One way to achieve what you want is this:

<div class="flex flex-col md:flex-row bg-red-500">
  <div class="flex items-center justify-center p-4 rounded-lg shadow-xs dark:bg-gray-800">
    <ul class="overflow-hidden rounded shadow divide-y">
      <li  class="w-64 p-4 bg-white">
        Menu
      </li>
    </ul>
  </div>
  <!-- Card -->
  <div class="flex justify-center bg-white items-center rounded-lg shadow-xs dark:bg-gray-800 w-full">
    <div>
      zrzrt
    </div>
  </div>
</div>

You can see the code in action in this: Tailwind Play Link

Now, I know the code is now using Flex instead of a Grid, But I find this approach to be more easy and clean (Easy to Read, and Less code?)

Now I'll explain the new approach, flex flex-col md:flex-row now we using flex to control the positions/dimensions of the child elements. flex-col will place the elements in a column position (Responsive in sm: breakpoint and under), md:flex-row After the md: (Medium) breakpoint our Flex is going to change into a Row direction, so now we can use all that wide space available, And also is going to scale into the wider breakpoints ( lg: , xl: and beyond).

Then we add this class to the Card: w-full so the card takes all the space after the first box. I also added a justify-center class in the first Box to center the menu horizontally in sm: breakpoint and under. You can edit or place it as you like though, since I just did it to show a clear view, that's why also added a bg-red-500 class to the main <div>.

Also, Just a suggestion. You don't need to do this: md:grid-cols-2 xl:grid-cols-2, Since md:grid-cols-2 is going to scale all the way into the wider break points, unless you declare a different value like: md:grid-cols-2 xl:grid-cols-3

At last if you have the time, you can take a look at this Amazing Screencast/Video series from TailwindLabs, where you can learn more about tailwind, really good to get started.