<label>
  Password:
  <div>
    <input type=password placeholder="Enter Your Password" /> 
    <i class="fa fa-eye"></i>
  </div>
</label>
label {
  font-family: sans-serif;
  div {
    position: relative;
    display: inline;

    input {
      padding: 4px;
      border-radius: .4em;
      width: 200px;

      +i{
        user-select: none;
        cursor: pointer;
        position: absolute;
        right: 4px;
        top: 3px;
      }
    }
  }
}
View Compiled
"use strict";
document.querySelector('input[type="password"]+i')
  .addEventListener('click', function() {
  let input = this.previousElementSibling;
  input.type = input.type == 'password' ? 'text' : 'password';
  this.className = this.className == 'fa fa-eye' ? 'fa fa-eye-slash' : 'fa fa-eye';
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.