I'm having trouble aligning items in a list to the right and adjusting their width based on content length. Unfortunately, I haven't been able to make it work despite multiple attempts.
Take a look at my code snippet below:
.messages {
overflow: hidden;
list-style: none;
padding: 0 0 50px 0;
margin: 0;
}
.messages .sent {
background: white;
color: #424242;
}
.messages .received {
background: dodgerblue;
color: white;
}
.messages .sent,
.messages .received {
padding: 5px 8px;
margin-bottom: 8px;
max-width: 80%;
}
.messages * .message {
margin-bottom: 5px;
}
.messages .sent .message .p {
text-align: left;
}
.messages * .message p {
word-wrap: break-word;
text-align: left;
font-size: 18px;
padding: 0;
margin: 0;
}<ul class="messages">
<li class="sent">
<div class="message">
<p>Hey</p>
</div>
</li>
<li class="received">
<div class="message">
<p>Hey man!</p>
</div>
</li>
<li class="sent">
<div class="message">
<p>What's up?</p>
</div>
<div class="message">
<p>How are ya?</p>
</div>
</li>
<li class="received">
<div class="message">
<p>Not bad</p>
</div>
<div class="message">
<p>Not bad at all</p>
</div>
</li>
</ul>Here's how the page looks with the current code:
However, here's a simple example of what I'm trying to achieve:
I've experimented with adding display: inline-block; under the .messages * .message selector and text-align: right; under .messages .sent, but unfortunately, it messed up the entire page layout.
I've spent quite some time trying to achieve the desired alignment as shown above, but nothing seems to be effective. How can I align specific items to the right in a list while keeping others aligned to the left?
Thank you!