How to increase horizontal width of input boxes using grid property and TailwindCSS

The below code is a next.js page on which I'm using TailWindCSS.

I'd like to get the first two input boxes to have a greater width by enlarging the grid.

I can set properties like "w-56" on the input boxes to make them bigger, but then I have to specify this property on both input boxes.

I'd like to just enlarge the width from the div with grid property. How do I do this?

import { NextPage } from "next";
import { AtSymbolIcon, FingerPrintIcon } from "@heroicons/react/24/outline";

// interface Props {}

const SignIn: NextPage = (props): JSX.Element => {
  return (
    <div className="h-screen grid place-items-center">
      <form className="flex flex-col">
        <h1 className="text-3xl mb-3 mx-auto">Login</h1>

        <div className="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3">
          <AtSymbolIcon className="grow-0 h-5 w-5" />

          <input
            className="grow bg-transparent outline-none"
            type="email"
            placeholder="Your email"
          />
        </div>

        <div className="flex items-center space-x-2 rounded-full bg-gray-100 p-3 mb-3">
          <FingerPrintIcon className="h-5 w-5" />

          <input
            className="bg-transparent outline-none"
            type="password"
            placeholder="Your passworsd"
          />
        </div>

        <input
          className="bg-cyan-100 mx-auto rounded-xl max-w-fit p-3 hover:bg-cyan-200"
          type="submit"
          value="Login"
        />
      </form>
    </div>
  );
};

export default SignIn;

It could be that the div w/"flex flex-col" is restricting the grid. How do I then enlarge this to something like "max-w-lg" ? I can only enlarge the input boxes using a property like "w-96".