HTML: Position element by the center of sibling
<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>