title: How to move Text inside a box to specific location
body: <p>so I'm trying to get the text close to the image, maybe like 2px away. How would one do that? what is the best way to move text, images or even button inside a box. In the location i want. (I've attached an image of how it looks like now, ive been playing around on W3 schools)<a href="https://i.stack.imgur.com/7WUMR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7WUMR.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;style&gt;
      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 80%;
      }
      
      .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
      }
      
      .container {
        padding: 2px 150px;
        float: right;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;h2&gt;Card&lt;/h2&gt;
  
    &lt;div class="card"&gt;
      &lt;img src="img_avatar.png" alt="Avatar" style="width:40%"&gt;
      &lt;div class="container"&gt;
        &lt;h4&gt;&lt;b&gt;John Doe&lt;/b&gt;&lt;/h4&gt;
        &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>