Nested flexboxes are not going in the direction i want

I want the items within div class="SexSupport content" that are have set to display: flex; and flex-direction: row; so that div class="SexSupport text" and div class="SexSupportPic" are sitting horizontally next to each other.

a photo of my figma file that shows how i want my content formatted

here is my html:

<section id="SexSupport">
        <div class="SexSupport content">
            <div class="SexSupport text">
                <div>
                    <h1 class="projectTitle">
                        SexSupport
                    </h1>
                    <h4 class="projectType">
                        app design, IxD, UX research
                    </h4>
                </div>
                <h4 class="projectCaption">
                    SexSupport is the solution to the lack of sexual
                    health education in American society. It is a 
                    confidential sexual health platform that empowers 
                    users to inquire about their sexual health.  
                    The site honors users anonymity without undermining 
                    interactivity.

                </h4>
            </div>
            <div class="SexSupportPic">
                <img src="Page 1/images/SexSupportphone.png" alt="picture of iPhones displaying screens from the SexSupport app">
            </div> 
        </div>
    </section>

and my CSS:

#SexSupport {
    background-color: #223843;
    margin: 0%;
}

.SexSupport .content {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.SexSupportPic {
    max-height: 80vh;
    width: auto;
}

but for some reason, they refuse to sit next to each other and remain in a vertical orientation:

a photo of my code preview that shows how it is displayed instead

I've tried rereading it over and over to make sure there are no typos and i even asked chatGPT multiple times to try to see if it was just a simple fix but the picture refuses to budge and remains directly below the text.

pls assist.

thank you.

I tried your code, and it works by removing the space between .SexSupport and .content just like this code:

.SexSupport.content {
    display: flex;
    flex-direction: row;
    align-items: center;
}