How to get flex item to remain fixed?

export default function Experiment() {
  const [name, setName] = useState("");
  const [insult, setInsult] = useState("");

  const onSubmit = () => {
    setInsult(generateInsult(name));
  };

  return (
    <>
      <div className="flex h-full flex-col items-center justify-center">
        <div className="flex flex-col gap-2">
          <input
            className="rounded-md border-solid border-orange-300 p-2 text-[1rem] outline-none"
            onChange={(e) => setName(e.target.value)}
          ></input>
          <button
            onClick={onSubmit}
            className="self-start rounded-md border-solid px-2 transition"
          >
            Submit
          </button>
        </div>
        <div className="mt-6 w-[210px]">{insult}</div>
      </div>
    </>
  );
}