title: HTML: Position element by the center of sibling
body: <p>Sorry for a dump question. I have never work with HTML.
  I have following UI:</p>
  
  <p><a href="https://i.stack.imgur.com/GT7LK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GT7LK.png" alt="enter image description here"></a></p>
  
  <p>I would like to be <code>Success</code> centralized by the middle of <code>sendMessage</code> element.</p>
  
  <pre><code>&lt;div style="position: relative; overflow: hidden;"&gt;
        &lt;div style="position: relative; width: 40%; float: left; vertical-align:middle"&gt;
              &lt;button class="btn btn-default"&gt;sendMessage&lt;/button&gt;
        &lt;/div&gt;
        &lt;div style="position: relative; width: 40%; float: right; vertical-align:middle"&gt;
              &lt;span class="label label-success" style="font-size: small;"&gt;Success&lt;/span&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I doing wrong? </p>