How do I make the text begin on top inside the div that it is in, and not in the middle?

Question

I have added an image below, where you can see my problem. I want the text to start on top in the div, and not in the middle. Here is my code

const Home = () => {
    return (
        <>
        <h1>Welcome to Language exchange</h1>
        <div className='row'>
            <div className='frontImageDiv col-sm'>
                
            </div>

            <div className='rightContentDiv col-sm'>
                <p>How to make this text start on top inside this div?</p>
                

            </div>
        </div>
        </>
    )
}

export default Home;

And the css to the 2 divs

.frontImageDiv {    
    display: flex;
    align-items: left;
    overflow: hidden;    
    max-width: 500px;
    max-height: 500px;
    border: 2px solid red ;    
    
}   

.rightContentDiv {        
    /*overflow: hidden; */
    float: right;
    width: 515px;
    height: 500px;
    border: 2px solid red ;    
    align-content: center;
}

Here's how it looks in HTML, (this is just an example so you can run the code and see the result):

    .frontImageDiv {    
        display: flex;
        align-items: left;
        overflow: hidden;    
        max-width: 500px;
        max-height: 500px;
        border: 2px solid red ;    
        
    }   
    
    .rightContentDiv {        
        float: right;
        width: 515px;
        height: 500px;
        border: 2px solid red ;    
        align-content: center;
    }

            <h1>Welcome to Language exchange</h1>
            <div className='row'>
                <div className='frontImageDiv col-sm'>
                    
                </div>
    
                <div className='rightContentDiv col-sm'>
                    <p>How to make this text start on top inside this div?</p>
                    
    
                </div>
            </div>
            </>

And here is a picture of what the result looks like after running:

Answer 1

You need to remove/change align-content: center in .rightContentDiv which is currently centering it vertically in the div. I'm guessing you want the text centered horizontally. I would look into using margin: auto or flex rows and columns (flex is great!)