CSS Flex - установите одинаковую ширину с помощью TailwindCSS

У меня есть следующий код React (+ Tailwind CSS):

<section className = {"flex flex-col items-center"}>
      {managers.map((manager) => (
        <UserCard user = {manager} />
      ))}

      <section className = {"flex flex-row"}>
        {coWorkers.map((coWorker) => (
          <UserCard user = {coWorker} isMarked = {user.id === coWorker.id} />
        ))}
      </section>

      {engineers.map((engineer) => (
        <UserCard user = {engineer} />
      ))}
    </section>

А UserCard проста как:

export default function Error({ user, isMarked }: Props) {
  return (
    <article
      className = {`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg ${
        isMarked && "border-4 border-purple-800 font-bold"
      }`}
    >
      <h1>
        {user.firstName} {user.lastName}
      </h1>
      <h2>{user.email}</h2>
    </article>
  );
}

Проблема: карты имеют разную ширину, например:

Любая идея, как я могу убедиться, что они одинаковой ширины, используя tailwindcss? (в каждой строке / столбце)