JSFiddle - React, Tailwind, and code Playground

by Michelle Bu

HTML

<div class="wrapper"><span class="container one">
  <span class="max">WWWW WWWW WWWW WWWW WWW</span>
  <input type="text" placeholder="4242 4242 4242 4242" />
</span><span class="container two">
  <span class="max">WWW / WW</span>
  <input type="text" placeholder="MM / YY" />
</span><span class="container three">
  <span class="max">WWWW</span>
  <input type="text" placeholder="CVC" />
</span><span class="container four">
  <span class="max">WWWWWWWWWWWW</span>
  <input type="text" placeholder="Postal code" />
</span></div>

CSS

.wrapper, input {
  font-family: monospace;
  font-size: 14px;
}

.max {
  visibility: hidden;
}

.container {
  height: 20px;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border: 1px solid red;
}

input {
  position: absolute;
  background: transparent;
  left: 0;
  top: 0;
  width: 100%;
  border: none;
}
input:focus {
  outline: none;
}

JavaScript

var widths = {
	one: document.querySelector('.one').offsetWidth,
	two: document.querySelector('.two').offsetWidth,
	three: document.querySelector('.three').offsetWidth,
	four: document.querySelector('.four').offsetWidth,
  wrapper: document.querySelector('.wrapper').offsetWidth,
}

console.log(widths);