<main>
  <p>Enter text to see it reversed below...</p>
  <input />
  <div data-reverse></div>
</main>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
body {
  display: grid;
  place-items: center;
}

main {
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 400px;
}

main p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

main input {
  border: 2px solid rebeccapurple;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding: 8px 16px;
}

main div[data-reverse] {
  color: rebeccapurple;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  min-height: 32px;
  padding: 8px 16px;
}

const reverse = new Proxy(
  {
    value: ''
  },
  {
    set: function (target, prop, value) {
      target[prop] = value;
      
      document.querySelectorAll('[data-reverse]').forEach(item => {
        let el = document.createElement('div');
        el.innerHTML = '‮' + value;
        item.innerText = el.innerHTML;
      });
      
      return true;
    }
  }
)

document.querySelector('input').addEventListener('input', e => {
  reverse.value = e.target.value;
});