title: How can I horizontally align 2 spans in the same line?
body: <p>I have 2 spans in the same line with several elements in each one. </p>
  
  <p>How can I add css styles to my 2 spans and make one be centered, the other one in the same line shouldn't move the previous one (centered), but it should bind to its right corner. </p>
  
  <p><a href="https://i.stack.imgur.com/r3bkr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r3bkr.png" alt="image description"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;span&gt;&lt;!-- should be centered--&gt; 
        &lt;a id="3"&gt;&lt;/a&gt;&lt;span id="2"&gt; ..... &lt;/span&gt; 
        &lt;a id="1"&gt;...&lt;/a&gt;
      &lt;/span&gt;
  
      &lt;span&gt;&lt;!-- left corner of this span should meet the right corner of the previous span --&gt;
        &lt;label&gt;something&lt;/label&gt;&lt;input type="text" id="5"&gt;
        &lt;input type="button" /&gt;
      &lt;/span&gt;
  
      &lt;span class="mrRight"&gt;&lt;!-- float right here --&gt; ...... &lt;/span&gt; 
  </code></pre>