title: Online - avatar Image with viewport
body: <p>I am using viewport for this project in order to be responsive. </p>
  
  <p>I want to have an avatar in the top right corner to show the user avatar and a green circle to show he is online.</p>
  
  <p>Problem is I can't make the circle be responsive If I increase or decrease the size the circle will move. A couple of images:</p>
  
  <p><strong>Big</strong></p>
  
  <p><a href="https://i.stack.imgur.com/H0VOd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H0VOd.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Small</strong></p>
  
  <p><a href="https://i.stack.imgur.com/aNNeF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aNNeF.jpg" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;body&gt;
  &lt;img class="img-header" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png"&gt;
  
  &lt;p&gt;Username&lt;/p&gt;
  
  &lt;img class="online" src="http://www.clker.com/cliparts/e/E/F/G/p/g/alex-green-circle-md.png"&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.img-header {
  position: relative;
  margin-top: 0vw;
  margin-right: 4vw;
  float: right;
  object-fit: cover;
  border-radius:50%;
  width: 7vw;
  height: 7vw;
  }
  
  p{
  float: right;
  text-transform: bold;
  margin-top: 1vw;
  margin-right: 2vw;
  display: inline;
  font-size: 4vw;
  }
  
  .online {
  width: 2vw;
  position: absolute;
  padding-left:92vw;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/v3e2e21z/" rel="nofollow noreferrer">JSFiddle</a></p>