<div class="wrapper">
  <div class="options">
    <pre>
.element {
  letter-spacing: <select class="option">
        <option value="-2px">-2px</option>
        <option value="0">0</option>
        <option value="5px">5px</option>
        <option value="0.5em" selected>0.5em</option>
        <option value="1em">1em</option>
      </select>;
}
</pre>
  </div>

  <div class="content">
    <div class="element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia facilis aperiam. porro iusto iste itaque! Excepturi optio.</div>
  </div>

</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

html,
body { 
  height: 100%; 
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  width: 100%;
  max-width: 720px;
  flex-direction: column;
  flex-wrap: wrap;
  box-sizing: border-box;
  font-size: clamp(12px, 3.5vw, 18px);
}

.options { 
  flex: 0 0 auto;
  margin-bottom: 1em;
}

.content {
  position: relative;
  padding-right: 25px;
}

.element {
  display: flex;
  align-items: center;
  text-align: left;
  letter-spacing: 0.5em;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
View Compiled 
const option = document.querySelector('.option');
const element = document.querySelector('.element');

option.addEventListener('change', () => {
  element.style.letterSpacing = `${option.value}`;
})
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.