title: Setting span alignment inside button
body: <p>i have two spans inside the button . Im trying to set one span ( which has text) to left of the button and other span ( which has caret) to the right of the button. But both the spans appears at the center. Can someone help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-bottom: 0 dotted;
    border-left: 4px solid transparent;
    content: "";    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" style="width:300px;"&gt;&lt;span style="text-align:left"&gt;selected all&lt;/span&gt;&lt;span style="text-align:right;" class="caret"&gt;&lt;/span&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Demo <a href="http://jsfiddle.net/887r8rav/" rel="nofollow">http://jsfiddle.net/887r8rav/</a></p>