I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the right for better readability.
In my component code, I have tried to allocate the left-text class to the left side of the text-div class and the right-text to the right side. However, it's not working as expected. The text is appearing like this ---> text1text2
Here is my updated 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>
)
Below you can find the current CSS styles applied:
.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;
}