JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
<a href="#" class="btn btn1">button 1</a>
<a href="#" class="btn btn2">button 2</a>
<a href="#" class="btn btn3">button 3</a>
<div class="floatdiv atbtn1">floating div</div>
</div>

CSS

.cont{
  position: relative;
  wide: 75%;
  padding-left: 20px;
  border: 3px solid red;
}

.btn{
  display: block;
  padding: 20px;
  background-color: green;
  color: white;
  width: 60px; 
  border: 1px solid white;
  margin-bottom: 50px;
  text-decoration: none;
  border-radius: 5px;
}

.floatdiv{
  position: absolute;
  border: 1px solid grey;
  width: 100px;
  min-height: 50px;
  left: 150px;
}

.atbtn1{
  top: 1px;
}

.atbtn2{
  top: 110px;
}

.atbtn3{
  top: 220px;
}

JavaScript

var flt = document.querySelector(".floatdiv");

var button1 = document.querySelector(".btn1");
button1.addEventListener("click", function(event){
    event.preventDefault();
    flt.classList.add("atbtn1");
    flt.classList.remove("atbtn2", "atbtn3");
    console.log("tst1");
})

var button2 = document.querySelector(".btn2");
button2.addEventListener("click", function(event){
    event.preventDefault();
    console.log("tst1");
    flt.classList.add("atbtn2");
    flt.classList.remove("atbtn1", "atbtn3");
})

var button3 = document.querySelector(".btn3");
button3.addEventListener("click", function(event){
    event.preventDefault();
    flt.classList.add("atbtn3");
    flt.classList.remove("atbtn2", "atbtn1");
})