JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<div id="divOuter">
  <div id="divInner">
    <input id="partitioned" type="text" maxlength="4" onKeyPress="if(this.value.length==4) return false;"/>
  </div>
</div>

CSS

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  min-width: 220px;
  outline: none;
}

#divInner{
  left: 0;
  /* position: fixed; */
  position: sticky;
}

#divOuter{
  width: 190px; 
  overflow: hidden;
}

#partitioned::-ms-clear {
  display: none;
  /* width : 0;
  height: 0; */
}