<main>
  <div class="wrapper">
    <form>
      <div>
        <label for="current-password">Current password</label>
        <input required type="password" id="current-password" name="current-password" autocomplete="current-password" aria-describedby="current-password-minlength" class="password-field">
<div id="current-password-minlength">Eight or more characters</div>
      </div>
     <div>
        <label for="password">New password</label>
       <input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength" autocomplete="new-password" class="password-field">
<div id="password-minlength">Eight or more characters</div>
      </div>  <button class="submit">Update password</button>
    </form>
  </div>
</main>

.visually-hidden {
  position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}

button {
  margin-top: 1rem;
}

.has-js::-ms-reveal {
    display: none;
}

.has-js::reveal {
    display: none;
}

.reveal-password {
  padding: 0.35em 1em;
  text-transform: capitalize;
  border: none;
  background: #555;
  border-radius: 0;
  margin-top: 0;
}

.submit {
  margin-top: 2rem;
}

input {
  border: 1px solid;
  padding: 0.3em;
}

label {
  display: block;
  font-size: 1.2rem;
  margin-top: 1rem;
}