I am making a basic website that showcases some plans. For some reason, despite efforts to align these plans vertically and horizontally using Tailwind, the first one seems to render above the others by a tad no matter what I do. How can I stop this from happening?

Top level code:

import PlanCard from '../components/PlanCard';

export default function Plans()
{
    return (
        <div className='bg-slate-200 flex justify-center items-center h-full p-8 overflow-y-auto h-128'>
            <div className='bg-red-200 flex flex-row items-center space-x-8 p-2 space-y-8'>
                <PlanCard name='Basic' price='0.99' description='Good for those only interested in summaries for one topic.' features={['1 topic per month']} id={0} />
                <PlanCard name='Basic' price='0.99' description='Good for those only interested in summaries for one topic.' features={['1 topic per month']} id={0} />
                <PlanCard name='Basic' price='0.99' description='Good for those only interested in summaries for one topic.' features={['1 topic per month']} id={0} />
            </div>
        </div>
    );
}

PlanCard Code:

import { useNavigate } from "react-router-dom";

export default function PlanCard({ name, price, description, features, id })
{
    const navigate = useNavigate();
    const button_style_string = 'bg-purple-300 text-center hover:bg-black text-black font-bold py-2 px-4 border-2 border-black hover:border-transparent hover:text-white rounded-full cursor-pointer mx-2';

    const on_free_trial = () =>
    {
        navigate('/signup?p=' + id);
    }

    return (
        <div className='bg-gray-400 flex flex-col border-2 border-black rounded-lg'>
            <div className='flex flex-col grow p-8 gap-4'>
                <h2 className='text-2xl font-bold'>{name}</h2>
                <h3 className='text-xl font-bold'>${price + '/month'}</h3>
                <p className='text-lg'>{description}</p>
            </div>
            <div className='flex flex-col p-8 gap-4'>
                <ul>
                    {features.map((feature, index) => <li key={index}>{'- ' + feature}</li>)}
                </ul>
                <button className={button_style_string} onClick={on_free_trial}>Start Free Trial!</button>
            </div>
        </div>
    );
}

Unwanted result: