title: Align text right in li that does not have class or id
body: <p>I want to align text right side. But that text does not have any id or class. </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>.list{list-style:none;}
  
  .list li{padding:10px;border:1px solid black;margin-top:3px;}
  .list li a{color:black;}
  .list li a:before {
    content: "\f00c"; /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 1px; /* same as padding-left set on li */
    margin-right:10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list"&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;First Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;Second Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;Third Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;Fourth Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;Fifth Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;li class="incomplete"&gt;&lt;a href="http://localhost/"&gt;Sixth Lesson&lt;/a&gt; - Not completed&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to align <code>Not completed</code> text to the right side.</p>