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

            <input type="range" id="translatey" name="translatey"
           min="-100" max="100" value="0">
            <output id="translatey-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(--teal);
  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 translateYValue = document.querySelector("#translatey-value");
const translateYSlider = document.querySelector("#translatey");
translateYValue.textContent = translateYSlider.value;

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