title: Vuetify.js: how to display text on the top right of a v-card' v-img component?
body: <p>In Vuetify.js, I want to display a one word text on the right side of a v-card image:</p>
  
  <pre><code>&lt;v-card&gt;
     &lt;v-img 
          rc="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
          aspect-ratio="2.75"&gt;
          &lt;span class="my-span"&gt;
            Info
          &lt;/span&gt;
     &lt;/v-img&gt;
  &lt;/v-card&gt;
  </code></pre>
  
  <p>But this is the result I get:</p>
  
  <p><a href="https://i.stack.imgur.com/wETAa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wETAa.png" alt="enter image description here"></a></p>
  
  <p>Even if <code>my-span</code> says <code>margin-right:0;</code>:</p>
  
  <pre><code>.my-span {
    background-color:blue;
    color:white;
    font-weight:bold;
    margin-right:0;
  }
  </code></pre>
  
  <p>How to fix this?</p>
  
  <p><a href="https://codepen.io/begueradj/pen/pQzdNa" rel="nofollow noreferrer"><strong>Codepen</strong></a>.</p>