title: Right align an image with max-width and max-height
body: <p>How do I right align an image which has max-width and max-height given? Please see the styles below. 
  The height and width are dynamically set. When the width is adjusted , the image moves to left side. How to prevent this and keep the image on the right edge while the width gets changed?</p>
  
  <pre><code>    &lt;div class="img-label-wrapper"&gt;
        &lt;img src="../assets/portal/css/x-logo.png" class="titleResource" width="60px" height="20px"&gt;                    
      &lt;/div&gt;
  
      .img-label-wrapper {
         position: relative;
         top: -5px;
         text-align: right;
         width: 100%;
      }    
      .img-label-wrapper .titleResource {
         max-width: 100px !important;
         max-height: 20px !important;
         float: right;
         margin-top: unset !important;
      }
  </code></pre>