title: CSS align list item to the right
body: <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>