<div class="container2">
	<div class="autoUpdateText"></div>
</div>

<form action="/profile" id="form">
	<input type="text" id="input" placeholder="Write here">
</form>
#form {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-content: center;
}

#input {
	display: inline-block;
	color: #444;
	border: 1px solid #ccc;
	background-color: grey;
	background: #ddd;
	box-shadow: 0 0 50px -5px rgba(255, 255, 255, 0.2);
	cursor: pointer;
	vertical-align: middle;
	width: 600px;
	height: 200px;
	font-size: 8em;
	padding: 8px;
	text-align: center;
}

.autoUpdateText {
	font-weight: 900;
	font-size: 3.5em;
	display: inline-block;
	line-height: 1em;
	font-family: monospace;
}

.autoUpdateText:hover {
	border-bottom: 0.15em solid white;
}

.container2 {
	display: flex;
	justify-content: center;
}

/* Background */

body {
	font-family: "Alatsi", sans-serif;
	margin: 0;
	overflow: hidden;
	background: white;
	color: black;
}
const input = document.querySelector("#input");
const h1 = document.querySelector(".autoUpdateText");
const form = document.querySelector("#form");
countLetters = 0;
maxLineCharacters = 78;

input.addEventListener("input", function (e) {
	countLetters = h1.innerHTML.length;
	if (countLetters < maxLineCharacters) {
		h1.innerHTML = input.value;
	} else if (countLetters % maxLineCharacters == 0 && countLetters != 0) {
		inputValue = input.value;
		h1.innerHTML += "<br>";
		row = h1.innerHTML;
		input.value = "";
		h1.innerHTML = row + inputValue;
	} else {
		h1.innerHTML = row + input.value;
	}
});

form.addEventListener("submit", function (e) {
	e.preventDefault();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.