title: Aligning text within progress bars
body: <p>I'm trying to align some text to the left and the right within some progress bars, with the percent completed written on in writing on the right side, and the title of the subject on the left. I'm sure this is a simple fix, but I can't get the text over to the right while keeping some on the left, all on the same line.</p>
  
  <p>I've tried aligning separate spans like this: </p>
  
  <pre><code>&lt;div class="progress" style="width:40%"&gt;
      &lt;span class="subject"&gt;Subject One&lt;/span&gt;&lt;span class="percent"&gt;40/100&lt;/span&gt;
  &lt;/div&gt;
  
  /* styles */
  .subject { text-align: left; }
  .percent { text-align: right; }
  </code></pre>
  
  <p>but it seems inline elements don't care about their text aligning. Yet when I make one of them block, it goes to separate lines.</p>
  
  <p>Here's the code snippet:</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>ul {
    list-style-type: none;
  }
  
  li {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
  }
  
  li .completion {
    background-color: #dbdbdb;
    padding: 20px;
  }
  
  .completion .subject {
    text-align: left;
  }
  
  .completion .percent {
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;div class="completion" style="width: 60%"&gt;&lt;span class="subject"&gt;Thing One&lt;/span&gt;&lt;span class="percent"&gt;60/100&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="completion" style="width: 40%"&gt;&lt;span class="subject"&gt;Thing Two&lt;/span&gt;&lt;span class="percent"&gt;40/100&lt;/span&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is greatly appreciated! Thank you.</p>
  
  <p>For clarification, i'd like the text to be aligned all the way to the right of the list item itself, not just within the completion div</p>