CSS align list item to the right
<p>I'm trying to align items in a list to the right and have their width adjust to the content's length, but nothing seems to be working. </p>

<p>Here's my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="messages"&gt;

  &lt;li class="sent"&gt;
    &lt;div class="message"&gt;
      &lt;p&gt;Hey&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="received"&gt;
    &lt;div class="message"&gt;
      &lt;p&gt;Hey man!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="sent"&gt;
    &lt;div class="message"&gt;
      &lt;p&gt;What's up?&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="message"&gt;
      &lt;p&gt;How are ya?&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="received"&gt;
    &lt;div class="message"&gt;
      &lt;p&gt;Not bad&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="message"&gt;
      &lt;p&gt;Not bad at all&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;

&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>And here is what the page looks like using that code: </p>

<p><img src="https://i.stack.imgur.com/BvStP.png" alt="Current"></p>

<p>But here is a quickly thrown together example of what I'm trying to achieve: </p>

<p><img src="https://i.stack.imgur.com/y13cm.png" alt="Goal"></p>

<p>I've tried adding <code>display: inline-block;</code> under the <code>.messages * .message</code> selector and <code>text-align: right;</code> under <code>.messages .sent</code>, which instead just screwed up the entire page design.</p>

<p>I've been attempting to achieve what I have posted above for longer than I'm willing to admit, but nothing I do seems to work. How do I go about aligning certain items to the right in a list while keeping others aligned to the left?</p>

<p>Thanks!</p>