How to get flex item to remain fixed?

So I was trying to make an insult generator for fun and ran into the following issue: https://gyazo.com/29b1019b9220b9f1a8f25b242769735a The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container.
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>
</>
);
}
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>
</>
);
}
I don't want it to be this way. I want the sibling div to have a fixed position where it is regardless of the content of its sibling. How do I do this?
6 Replies
missymae
missymae4mo ago
items-center is maybe not what you want? items-start should keep the input positioned at the top with the rest following below.
tejveer
tejveerOP4mo ago
Yes, that would resolve the issue since it would position it at top-left, but I wanted all the content to be centered
missymae
missymae4mo ago
You justify-center, so it would start at center-top, which you can then position where you want.
tejveer
tejveerOP4mo ago
Ah yes, forgot about that Then wouldn't I have to manually position both of the items? Maybe grid would've been a better option for this Ok, I got it working with grid
tejveer
tejveerOP4mo ago
export default function Experiment() {
const [name, setName] = useState("");
const [insult, setInsult] = useState("");

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

return (
<>
<div className="grid grid-rows-2 mx-auto w-[210px] h-full">
<div className="self-end 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">{insult}</div>
</div>
</>
);
}
export default function Experiment() {
const [name, setName] = useState("");
const [insult, setInsult] = useState("");

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

return (
<>
<div className="grid grid-rows-2 mx-auto w-[210px] h-full">
<div className="self-end 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">{insult}</div>
</div>
</>
);
}
Refactored CSS
Want results from more Discord servers?
Add your server