CSS <div> doesn't align the text to the left even when there is space

Question

Hello there I try to align some text in a container to the left but it won't work even when there is free space. As you can see there is some free space directly next to the image which isn't used for no reason. Right here I show you a picture and also the style. Thanks in advance if anyone can help.

 .text-wrapper-overview { position: inherit; left: 100px; width: 65%; } .user-name { position: inherit; margin: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: large; font-weight: bold; } .last-message { position: inherit; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px; font-size: small; } .timestamp-overview { position: inherit; margin: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: small; font-weight: normal; }

 <div id={this.name} className="chat-overview" onClick={()=>this.renderChat()}> <img className="round-image" src="https://i.pravatar.cc/200"></img> <div className="text-wrapper-overview"> <p className="user-name">{this.name}</p> <p className="last-message">{this.lastMessage.text}</p> <p className="timestamp-overview">{this.lastDate}</p> </div> <div className="notification">10+</div> </div>

Answer 1

Try

p.date {
text-align: right;
}

property this will align p text to right.

Read more here : https://www.w3schools.com/cssref/pr_text_text-align.ASP

Answer 2

You have not included all of your styles to use as an example. But I would suggest looking into the flex property .

 .chat-overview { display: flex; border: 1px solid; border-radius: 5px; align-items: center; } .text-wrapper-overview { position: inherit; left: 100px; width: 65%; } .user-name { position: inherit; margin: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: large; font-weight: bold; } .last-message { position: inherit; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px; font-size: small; } .timestamp-overview { position: inherit; margin: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: small; font-weight: normal; }

 <div id={this.name} class="chat-overview"> <img class="round-image" src="https://i.pravatar.cc/200"></img> <div class="text-wrapper-overview"> <p class="user-name">{this.name}</p> <p class="last-message">{this.lastMessage.text}</p> <p class="timestamp-overview">{this.lastDate}</p> </div> <div class="notification">10+</div> </div>