Overlap element over other elements
<p>Currently on my page I have this layout</p>

<pre><code>&lt;div class="card"&gt;
    &lt;div class="card-block"&gt;
        &lt;h4 class="card-title text-muted"&gt;UltimateWarrior15&lt;/h4&gt;
        &lt;h6 class="card-subtitle text-muted"&gt;
            Adventurer card
        &lt;/h6&gt;
    &lt;/div&gt;
    &lt;img data-src="holder.js/100px180/?text=Image"&gt;
    &lt;div class="card-block"&gt;
        &lt;div class="form-group row"&gt;
            &lt;label for="player-level-text" class="col-xs-2 col-form-label"&gt;Rank&lt;/label&gt;
            &lt;div class="col-xs-10"&gt;
                &lt;label class="form-control text-muted"&gt;D&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>It gives pretty simple result </p>

<p><a href="https://i.stack.imgur.com/wte4g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wte4g.png" alt="enter image description here"></a></p>

<p>But what I want to achieve is to move <code>rank</code> value from <code>label</code> formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this</p>

<p><a href="https://i.stack.imgur.com/8MMRm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8MMRm.png" alt="enter image description here"></a> </p>

<p>How to achieve this using <code>HTML</code> and <code>CSS</code>?</p>

<p>Sample
<a href="https://jsfiddle.net/46qnx1LL" rel="nofollow noreferrer">https://jsfiddle.net/46qnx1LL</a></p>