<div class="container">
  <div class="toggle-container">
    
      <code>
        <span class="opening-line">div {</span>   
        
        <label>
          <span class="property-line">transform: translateX(  

            <input type="range" id="translatex" name="translatex"
           min="-100" max="100" value="0">
            <output id="translatex-value"></output>px);</span>
        </label>

        <span class="closing-line">}</span>
      </code>
  </div>

  <div class="result-container">
    <div class="target-element">
    </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 {
  background: var(--orange-juice);
  min-height: 200px;
  width: 200px;
}

select {
  font-size: 1em;
}

code span {
  display: block;
}

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

span.opening-line,
span.closing-line{
  padding: .2em 0;
}

#border-width {
  width: 100px;
}

.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;
  padding: 40px;
}

.result-container {
  padding: 40px;
}
.result-container span {
  background: var(--orange-juice);
}

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

const translateXValue = document.querySelector("#translatex-value");
const translateXSlider = document.querySelector("#translatex");
translateXValue.textContent = translateXSlider.value;

//translateX slider
translateXSlider.addEventListener("input", (event) => {
  translateXValue.textContent = translateXSlider.value;
  targetElement.style.transform = 'translateX(' + translateXSlider.value + 'px)';
});