<div class="content">
  <div class="buttons">
  <button class="button" onclick="visibleEx()">visible</button> 
  <button class="button" onclick="hiddenEx()">hidden</button>  
  <button class="button" onclick="scrollEx()">scroll</button> 
  <button class="button" onclick="autoEx()">auto</button>  
          
  </div>
<div id="square">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at finibus libero, vel gravida lectus. In in varius leo. Sed ut metus neque. Duis lobortis mauris in quam tincidunt, non pellentesque purus rutrum. Etiam ultrices, eros quis tristique dignissim, quam mauris maximus libero, a sagittis massa nibh ac enim. Pellentesque imperdiet, nulla vel ullamcorper vehicula, sapien velit ultrices ante, sodales aliquam erat neque sit amet eros. </div>
</div>
  <div class="col"><h2>CSS Code:</h2><p id="code">CSS code</p>
</div>
</div>

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

.content {
  position: relative;
}

#square {
  width:200px;
  height: 200px;
  border: 3px solid #333;
  position: relative;
}

.buttons {
  left:-210px;
  position: absolute;
  top:0;
  z-index:1;
}

button {
  background-color: #333;
  color: white;
  border: none;
  display: block;
  padding:5px;
  width: 150px;
  margin:5px;
  transition: .2s;
  font-weight: bold;
}

button:hover {
  background-color: white;
  color: #333;
}

.col {
  position: absolute;
  font-weight: bold;
  font-size:15px;
  width: 250px;
  left:250px;
  top:-15px;
}

function visibleEx() {
  document.getElementById("square").style.overflow="visible" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "overflow: visible;") {
    x.innerHTML = "overflow: visible;";
  } else {
    x.innerHTML = "overflow: visible;";
  }
}

function hiddenEx() {
  document.getElementById("square").style.overflow="hidden" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "overflow: hidden;") {
    x.innerHTML = "overflow: hidden;";
  } else {
    x.innerHTML = "overflow: hidden;";
  }
}

function scrollEx() {
  document.getElementById("square").style.overflow="scroll" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "overflow: scroll;") {
    x.innerHTML = "overflow: scroll;";
  } else {
    x.innerHTML = "overflow: scroll;";
  }
}

function autoEx() {
  document.getElementById("square").style.overflow="auto" 
  
  var x = document.getElementById("code");
  if (x.innerHTML === "overflow: auto;") {
    x.innerHTML = "overflow: auto;";
  } else {
    x.innerHTML = "overflow: auto;";
  }
}