<div class="container">
  <div class="toggle-container">
    <label>
      <code>
        <span class="opening-line">div {</span>
        <span class="property-line">cursor: 
          <select class="toggle" name="toggle">
            <option value="auto">auto</option>
<option value="default">default</option>
<option value="none">none</option>
<option value="context-menu">context-menu</option>
<option value="help">help</option>
<option value="pointer">pointer</option>
<option value="progress">progress</option>
<option value="wait">wait</option>
<option value="cell">cell</option>
<option value="crosshair">crosshair</option>
<option value="text">text</option>
<option value="vertical-text">vertical-text</option>
<option value="alias">alias</option>
<option value="copy">copy</option>
<option value="move">move</option>
<option value="no-drop">no-drop</option>
<option value="not-allowed">not-allowed</option>
<option value="e-resize">e-resize</option>
<option value="n-resize">n-resize</option>
<option value="ne-resize">ne-resize</option>
<option value="nw-resize">nw-resize</option>
<option value="s-resize">s-resize</option>
<option value="se-resize">se-resize</option>
<option value="sw-resize">sw-resize</option>
<option value="w-resize">w-resize</option>
<option value="ew-resize">ew-resize</option>
<option value="ns-resize">ns-resize</option>
<option value="nesw-resize">nesw-resize</option>
<option value="nwse-resize">nwse-resize</option>
<option value="col-resize">col-resize</option>
<option value="row-resize">row-resize</option>
<option value="all-scroll">all-scroll</option>
<option value="zoom-in">zoom-in</option>
<option value="zoom-out">zoom-out</option>
<option value="grab">grab</option>
<option value="grabbing">grabbing</option>
          </select>;
        </span>
        <span class="closing-line">}</span>
      </code>
    </label>
  </div>

  <div class="result-container">
    <div class="target-element">
      <p>Move your mouse cursor over this block</p>
    </div>
  </div>
  
</div>

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

:root {
  --raspberry: #DE3163;
  --toggle-colour: #d9d9d9;
  --teal: #9FE2BF;
  --lemon: #DFFF00;
  --sunshine: #FFBF00;
  --orange-juice: #FF7F50;
  --turquoise: #40E0D0;
  --dusty-blue: #6495ED;
  --dusty-lilac: #CCCCFF;
}

.target-element {
  min-width: 200px;
  min-height: 200px;
  background: var(--orange-juice);
  cursor: auto;
}

select {
  font-size: 1em;
}

code span {
  display: block;
}

span.property-line {
  padding-left: 2em;
}

.container {
    display: grid;
    grid-gap: 0;
    height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}

  @media (max-width: 700px) {
    .container {
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr;
    }
  }

.toggle-container {
  background: var(--toggle-colour);
  display: flex;
  justify-content: center;
  align-items: center;
}

.result-container {
  padding: 40px;
}

const selectElement = document.querySelector(".toggle");
const targetElement = document.querySelector(".target-element");

selectElement.addEventListener("change", (event) => {
  targetElement.style.cursor =  event.target.value;
});