How to make 3 row in 1 row on tailwind

Question

I want to divide the card into 3 with tailwind css. how can ı make ?

 <Card
      className="grid grid-rows-2"
    >
      <h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
      <p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
      <div className="flex items-center justify-between mb-2 row-span-1">
        <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
      </div>
    </Card>

Answer 1

If you need three equally-sized columns, you can use grid with columns:

<Card className="grid grid-cols-3">
    <h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
    <p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
    <div className="flex items-center justify-between mb-2 row-span-1">
        <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
    </div>
</Card>

However, if you want to divide it in three equally-sized rows, you can use grid with rows:

<Card className="grid grid-rows-3">
    <h5 className="font-bold tracking-tight text-gray-900 row-span-3">{productName}</h5>
    <p className="text-gray-900 text-sm row-span-4">{shortDesc}</p>
    <div className="flex items-center justify-between mb-2 row-span-1">
        <span className="font-bold text-gray-900"><Price priceWithTax={priceWithTax} currencyCode={currencyCode} /></span>
    </div>
</Card>

The number in grid-cols-{num} and grid-rows-{num} is the number of columns or rows, as in grid-template-rows: repeat({num}, minmax(0, 1fr));. You can see the allowed values here.

If you need each part to conform to the size of the content, you're better off with flexbox instead.