How can I make CSS grid items have auto height using tailwind?

Question

Let's suppose I have this 2 by 2 grid layout made with the help of Tailwindcss:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2 grid-rows-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>

The problem with the above layout is that the rows are equal in height or, in other words, all the grid items are forced to have the height of the tallest of them.

The items on the first row must have the height required by only a single row of text.

How do I achieve that?

Answer 1

Simply remove grid-rows-2. No need to define the rows, defining the columns is enough

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>