JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<h5>Multiple inputs</h5>
  <form>
		<input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text"
		 maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" />
	</form>
	
  <h5>Letterspacing</h5>
	<input id="letterSpacing" />
  
	<h5>Wordspacing (press space after each char)</h5>	
	<input id="wordSpacing" />

CSS

* {
	box-sizing: border-box;
}


body {
	font-family: "Courier";
	background-color: #ccc;
	margin: 0;
	padding: 0;
	font-size: 14px;
}



input {
	font-family: "Courier New";
	width: 100vw;
	border: none;
	background: repeating-linear-gradient( 90deg, #fff, #fff calc( calc( 100vw - 40px) / 6), transparent calc( calc( 100vw - 40px) / 6), transparent calc( calc( calc( 100vw - 40px) / 6) + 8px));
}



form>input {
	width: 30px;
	background: #fff;
	margin-right: 5px;
	text-align: center;
}



#letterSpacing {
	letter-spacing: calc( calc( 100vw - 40px) / 6);
	padding-left: calc( calc( calc( 100vw - 48px - 40px) / 6) / 2);
}


#wordSpacing {
	word-spacing: calc( calc( 100vw - 48px - 40px) / 6);
	padding-left: calc( calc( calc( 100vw - 48px - 40px) / 6) / 2);
}

JavaScript

$("form > input").keyup(function () {
	$el = $(this);
	if ($el.val().length >= 1) {
		$el.next().focus();
	}
	if ($el.val().length === 0) {
		$el.prev().focus()
	}
});