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

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.

enter image description here

.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>

CodePudding user response：

Try

p.date {
text-align: right;
}

property this will align p text to right.

CodePudding user response：

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} >
  <img  src="https://i.pravatar.cc/200"></img>
  <div >
    <p >{this.name}</p>
    <p >{this.lastMessage.text}</p>
    <p >{this.lastDate}</p>
  </div>
  <div >10 </div>
</div>