title: Adding fa eye icon inside input field at the right side which is responsive
body: <p>I am trying to add an eye icon at the right side. In my origin code it shows at the right side but is not responsive and moves when the screen size is changed.</p>
  
  <p>Below is a loose implementation.  I want that it should show at the right side right before when the input field ends in both password fields. Currently it shows but not properly. Test it in full screen.</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-css lang-css prettyprint-override"><code>.login-form {
   margin: 20px 0 0 0;
  }
  
  .login-form input[type=text] {
   background: #fff;
   border: none;
   border-radius: 8px;
   position: relative;
   font-size: 15px !important;
   display: inline-block;
   outline: none;
   width: 100%;
   height: 30px !important;
   padding: 18px 0 18px 20px;
   margin-bottom: 15px !important;
   color: #666 !important;
   border: 1px solid grey;
  }
  
  .login-left {
   width: 44%;
   margin: 0 0 0 5%;
   display: inline-block;
   float: left;
  }
  
  .login-right {
   width: 44%;
   margin: 0 5% 0 0;
   display: inline-block;
   float: right;
  }
  
  @media screen and (max-width:767px) {
   .login-width {
    width: 95% !important;
   }
   .login-left {
    width: 90%;
    margin: 0 auto;
    display: block;
    float: none;
   }
   .login-right {
    width: 90%;
    margin: 0 auto;
    display: block;
    float: none;
   }
  }
  
  .p-viewer {
   z-index: 9999;
   position: absolute;
   left: 560px;
   margin-top: -60px;
  }
  
  .fa-eye {
   color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
  &lt;div class="login-form"&gt;
  &lt;div class="login-left"&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
     &lt;input type="text" placeholder="Email *"/&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
     &lt;input type="text" placeholder="Password *"/&gt;
     &lt;span class="p-viewer"&gt;
     &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;
     &lt;/span&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="login-right"&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
     &lt;input type="text" placeholder="Confirm email *"/&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
     &lt;input type="text" placeholder="Confirm password *"/&gt;
     &lt;span class="p-viewer2"&gt;
     &lt;i class="fa fa-eye" aria-hidden="true"&gt;                     &lt;/i&gt;
     &lt;/span&gt;
     &lt;div class="clearfix"&gt;&lt;/div&gt;
     &lt;br&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>