My attempt to align the text to the right within my div element has been unsuccessful. Despite using text-align: right and width: 100%, the issue persists. It seems that the problem lies within the left-side and right-side attributes, but I am unable to pinpoint the exact cause of the problem.
Below is my code snippet :
.left-block {
width: 50%;
height: 450px;
display: inline-block;
padding-left: 1%;
padding-right: 1%;
}
.selected-file {
color: #12073C;
font-size: 25px;
font-weight: 700;
padding-right: 2%;
padding-left: 3%;
}
.left-side {
text-align: left;
}
.right-side {
text-align: right;
color: red;
}
.small-title {
font-weight: bold;
font-size: 20px;
padding-left: 2%;
margin-bottom: 1.5%;
}<div className="left-block">
<div className="file-informations">
<div className="small-title">File Information</div>
<div className="file-values">
<span className="left-side">File Size</span>
<span className="right-side"><b>{this.humanFileSize(this.state.fileSize)}</b></span><br/> File category <b>{this.state.type}</b><br/>
</div>
</div>
<div className="merging-informations">
<div className="small-title">
Merging statistics
</div>
<div className="merging-values">
<b>Primary Key</b> <br/> o/w New Lease <br/> o/w New Well <br/> o/w Existing <br/>
<b>o/w Conflicted</b> <br/> o/w Distric Name <br/> o/w Field2 <br/> o/w Field3 <br/>
</div>
</div>
</div>