Css – Why Are All Cards of Equal Height Despite Content Variation?

I’m working on a reviews section in my React application using Tailwind CSS, where I want each review card to adjust its height based on the amount of text it contains. However, despite using a flexbox layout, all the cards are displaying at equal height, which is not the behavior I expect.

import React from 'react';

const comments = [
  { id: 1, name: 'User 1', title: 'Review Title 1', comment: 'This is a short comment.', date: '2024-10-11' },
  { id: 2, name: 'User 2', title: 'Review Title 2', comment: 'This is a much longer comment to test how the card height adjusts based on content. We want to see if it affects the layout.', date: '2024-10-11' },
];

export default function ReviewSection() {
  return (
    <div className="flex justify-center flex-wrap gap-3">
      {comments.map((comment) => (
        <div
          key={comment.id}
          className="bg-gray-100 w-[90%] mx-auto mb-5 md:mx-0 md:w-[40%] lg:w-[30%] rounded-3xl border border-gray-300 shadow-xl"
        >
          <div className="p-5">
            <h1 className="font-semibold">{comment.title}</h1>
            <p className="text-sm mt-5">{comment.comment}</p>
          </div>
          <div className="px-5 pb-3 text-sm">
            <p className="text-gray-600">{comment.date}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

• Ensured that the card div does not have any flex properties that could cause height equalization.
• Verified that there are no min-height or max-height styles applied globally or inherited from parent elements.
• Tested with varying lengths of content in comment.comment, but the issue persists.
  Question:
  What changes can I make to allow each review card to have a height that adjusts independently based on its content? Are there specific Tailwind CSS classes or styles that I should implement to achieve this behavior?