title: How to right align last li?
body: <p>I am trying to right align the <code>&lt;div class="right-align"&gt;</code> (last <code>&lt;li&gt;</code>) using CSS. I did try to do the following but it did not work. </p>
  
  <p>I need to be able to make the height of <code>&lt;ul class="third-level"&gt;</code> to automatically adjust as the height of <code>&lt;div class="right-align"&gt;</code> depending upon length of content inside. </p>
  
  <p><a href="https://codepen.io/userrj/pen/BqPoLY" rel="nofollow noreferrer">codepin</a></p>
  
  <p>How would I right align the last <code>&lt;li&gt;</code>?</p>
  
  <p><strong>What i tried but did not work because of the height of <code>&lt;div class="right-align"&gt;</code></strong>
  <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>.third-level {
    position: relative;
    
  }
  
  .third-level li:last-child {
    position: absolute;
    right: 0;
  }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="third-level"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Resets&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Grids&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Frameworks&lt;/a&gt;&lt;/li&gt;
            &lt;li &gt;
              &lt;div class="right-align"&gt;
              &lt;img src="https://via.placeholder.com/350x150"&gt;
              &lt;h5&gt;Image placeholder&lt;/h5&gt;
              &lt;p&gt;Collaboratively matrix parallel growth strategies rather than emerging "outside the box" thinking. &lt;/p&gt;
              
              &lt;a href="#some-path"&gt;Some path&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>current issue:</p>
  
  <p><a href="https://i.stack.imgur.com/5SyVz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5SyVz.png" alt="current issue"></a></p>
  
  <p>desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/lhr5X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lhr5X.png" alt="desired output"></a></p>