how to have one piece of text display on left hand side and the other on the right hand side of a di-CodePudding

I have a div with 2 pieces of text and I have some styling already but to make the text more readable I am wondering how to position one piece of text to the left-hand side and the other to the right-hand side.

I am trying to position the left-text class to the left-hand side of the text-div class and the right-text to the right-hand side of the div does anyone know what I am missing right now the text is just one after the other on the left-hand side so displays like this ---> text1text2

This is my component code:

return (
        <div className="container-one">
            <div className="container-two">
                <Comp/> 
            </div>
            <div className="text-div">
                <span className="left-text">{text1}</span>
                <span className="right-text">{text2}</span>
            </div>
        </div>        
    )

here is the css so far:

.left-text{
    float: left;
    text-align: left;
}

.right-text {
    float: right;
    text-align: right;
}

.text-div {
    display: flex;
    align-items: center;
}

.container-two {
    width: 100%;
    border-radius: 9px;
    margin-bottom: 9px;
}

.container-one {

    width: 100%;
    font-size: 12px;
    flex: 0 0 auto;
    
    display: flex;
    
    flex-direction: column;
    
    position: relative;

}

CodePudding user response：

You can achieve this by adding justify-content: space-between; in .text-div in CSS

.text-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

CodePudding user response：

In your class of .text-div, you can add justify-content: space-between;.

.text-div {
    display: flex;
    align-items: center;
    justify-content: space-between; /*Add this line.*/
}

Also, here is a some good documentation on flexbox I used when learning it.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/