How to shrink div around wrapped text (fix whitespace)? [duplicate]

TL;DR: (Check images) div won't shrink around wrapped text smaller than bounding box, causing alignment problems. Tailwind, React.

Images

Okay:

Not okay (whitespace to the right of text):

I created this layout, using React and Tailwind, with 2 children inside a parent div. One of them is an <img>, one of them a <p> wrapped in a div.

The problem is with the <p>:

• When the screen is wide and the text is a single line, no problem;
• However, when the screen width decreases and the text wraps, the div doesn't shrink (and therefore the justify-items-center property on the parent div can't visually center the children).

export default function Hero() {    return (<div className="flex flex-col gap-4 items-center justify-items-center"><div className="inline-flex flex-col lg:flex-row gap-8 lg:gap-16 items-center border-accent border-2"><img                    src="/smiley.svg"                    alt="self portrait"                    className="translate-y-[-5%] w-[160px] md:w-[200px] lg:w-[300px] h-auto transition-transform duration-300 ease-in-out hover:scale-105"                /><div className="font-display font-bold text-6xl md:text-7xl lg:text-9xl lg:text-left "><p className="border-primary border-2">Hi! I'm <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary animate-gradient-x">Name</span>!</p></div></div></div>    );}

I don't want flex-nowrap, because I actually like when the text wraps.
I tried various element/property combinations; w-fit, inline-block, whitespace-pre-wrap and break-words properties, on the different elements.

I even considered just having the 2 blocks of text (Hi I'm/Name!) as a div with flex flex-col and always keeping the wrapped text look, but this feels like an inelegant solution (especially considering responsiveness).