How to make 3 row in 1 row on tailwind

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>

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.

You can create a row of 3 Cards by encapsulating a div with class grid grid-cols-3 gap-4. gap-4 will gives some spacing between them.

You can view your corrected code here

Below is the code also

<div className="p-3 grid grid-cols-3 gap-3">
  <Card className="bg-slate-300">
    <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>
  <Card className="bg-slate-300">
    <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>
  <Card className="bg-slate-300">
    <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>
</div>

Some resources here