JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn-toggle-display">
Click Me to hide the element below
</button>
<div id="display-none-target">
Watch the elements below me when my dispay is set to none
</div>
<button id="btn-fade-in-out">
Click Me to fade a div in or out
</button>
<div id="fade-target">
Watch me fade in!
</div>
<div>
See how I don't move when using the opacity property to fade the div?
</div>

CSS

div{
  padding:10px;
  border:2px solid #666;
}
#fade-target{
  display:inline-block;
  height:200px;
  width:200px;
  text-align:center;
  background:#9c0;
  opacity:0;
  transition:opacity 1s linear;
}
#fade-target.fade{
  opacity:1;
}

JavaScript

const btnToggleDisplay = document.getElementById("btn-toggle-display");
const toggleTarget = document.getElementById("display-none-target");
btnToggleDisplay.onclick = function(){
	const isOn = toggleTarget.style.display;
  if(isOn === "") {
  	toggleTarget.style.display = "none";
  }
  else{
    toggleTarget.style.display = "";
  };
};

const btnFade = document.getElementById("btn-fade-in-out");
const fadeTarget = document.getElementById("fade-target");
btnFade.onclick = function(){
	const isFadedIn = fadeTarget.classList.contains("fade");
  if(!isFadedIn) {
  	fadeTarget.textContent = "Watch me fade in!";
  	fadeTarget.classList.add("fade");
  }
  else{
    fadeTarget.textContent = "Watch me fade out!";
    fadeTarget.classList.remove("fade");
  };
};