I am building a Meme maker project but having a problem with CSS

Question

So I am building a meme maker project from a course So I am building it from looking it into the mockup of it in figma. But then I have came across a problem and that is with CSS.

Desired outcome.

My outcome.

The text is coming to the bottom of the image but dont know how to make this work.

HTML.

<div>
        <form>
            <div className="input-area">
                <input 
                    className="input-text-area" 
                    type="text" 
                    placeholder="First Text"
                    name="topText"
                    value={getMemeImage.topText} 
                    onChange={textChange}
                />
                <input 
                    className="input-text-area" 
                    type="text" 
                    placeholder="Second Text"
                    name="bottomText"
                    value={getMemeImage.bottomText} 
                    onChange={textChange}
                />
            </div>
                <button onClick={memeFunction} type="button" className="submit-button">Yo! Na Meme Na Mokana kodithe Nenu Potha 😉😂</button>
        </form>
            <div>
                <img src={getMemeImage.img} className="meme-image" />
                <h3 className="meme-text">{getMemeImage.topText}</h3>
                <h3 className="meme-text">{getMemeImage.bottomText}</h3>
            </div> 
    </div>

CSS.

.meme-image {
display: grid;
margin: auto;
margin-top: 20px;
height: auto;
width: 60%;
}

I haven't added the Css for the text tried few things but it is going outside of image. Thanks for the help