<div class="container">
  <div class="toggle-container">
        <span class="opening-line">div {</span>
        <span class="property-line">overflow: 
          <select class="toggle" name="toggle">
            <option value="visible">visible</option>
            <option value="hidden">hidden</option>
            <option value="scroll">scroll</option>
            <option value="auto">auto</option>
            <option value="clip">clip</option>
        <span class="closing-line">}</span>

  <div class="result-container">
    <div class="target-element">
      <p>“And really, I'm gonna start to resent you for even asking me to stop drumming. And we're just gonna start to hate each other. And it's gonna get very... It's gonna be ugly. And so for those reasons, I'd rather just, you know, break it off clean... because I wanna be great.” — Andrew, Whiplash</p>
* {
  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(--lemon);
  width: 100%;
  max-width: 300px;
  height: 180px;

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;
.result-container span {
  background: var(--teal);

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

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

External CSS

  1. https://codepen.io/tutsplus/pen/vYrpEwd.css

External JavaScript

This Pen doesn't use any external JavaScript resources.