CSS Flex - Set same width with TailwindCSS

I have the following React code (+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>

While UserCard is simple as:

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>
  );
}

The issue: the Cards are not in the same width, e.g:

Any idea how I can make sure they are in the same width using tailwindcss? (in each row/column)