<input type="text" class="text-input" />
<p>Text field value: <span class="output"></span></p>
body {
  margin: 16px;
  line-height: 1.5;
  font-family: sans-serif;
  letter-spacing: 0.5px;
}

p {
  overflow-wrap: anywhere;
}

input {
  width: 100%;
  max-width: 320px;
  padding: 8px;
  font: inherit;
  letter-spacing: inherit;
}

const textInput = document.querySelector(".text-input");
const output = document.querySelector(".output");

textInput.addEventListener("input", (event) => {
  output.textContent = event.currentTarget.value;
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.