JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 600px;overflow:auto;">
  <div id="block1" class="block">
    This is block 1
  </div>
  <div id="block2" class="block">
    This is block 2
  </div>
  <div id="block3" class="block">
    This is block 3
  </div>
  <div id="block4" class="block">
    This is block 4
  </div>
  <div id="block5" class="block" style="position:relative;left:10px">
    This is block 5
  </div>
  <div id="block6" class="block">
    This is block 6
  </div>
  <div id="block7" class="block block7">
    This is block 7
  </div>
  <div id="block8" class="block">
    This is block 8
  </div>
</div>

<div>
  <button type="button" onclick="setDisplay( 'block2', 'none' );setDisplay( 'block3', 'none' );setDisplay( 'block4', 'none' );setDisplay();">
    Remove block 2, 3 and 4
  </button>
  <button type="button" onclick="setDisplay( 'block2', '' );setDisplay( );">
    Add block 2
  </button>
</div>

CSS

.block {
  width: 200px;
  height: 20px;
  border: 1px solid black;
  margin: 20px;
  float: left;
  display: inline-block;
}
.block7 {
  position: relative;
  left:-10px;
  top:0px;
}

JavaScript

var SD_TransitionSpeedInMs = 300;
var SD_AllElements;
var SD_Org = [];
var SD_New = [];
function setDisplay( elID, display ) {
  if( elID ) {
    document.getElementById( elID ).dataset.display = display;
  } else {
    executeSetDisplay();
  }
}

function executeSetDisplay() {
  SD_AllElements = document.body.getElementsByTagName("*");
  for( var i=0;i<SD_AllElements.length; i++ ) {
    var computedStyle = getComputedStyle( SD_AllElements[i] );
    var style = SD_AllElements[i].style;
    SD_Org[i] = { top:SD_AllElements[i].offsetTop - SD_AllElements[i].parentElement.offsetTop, left:SD_AllElements[i].offsetLeft - SD_AllElements[i].parentElement.offsetLeft, style: { top:style.top, left:style.left, display:style.display, position:style.position, transition:style.transition, visibility:style.visibility }, computedStyle: { top:computedStyle.top, left:computedStyle.left, display:computedStyle.display, position:computedStyle.position, transition:computedStyle.transition } };
  }
  for( var i=0; i<SD_AllElements.length; i++ ) {
    if( typeof SD_AllElements[i].dataset.display !== 'undefined' ) {
      SD_AllElements[i].style.display = SD_AllElements[i].dataset.display;
    }
  }
  for( var i=0;i<SD_AllElements.length; i++ ) {
    SD_New[i] = { top:SD_AllElements[i].offsetTop - SD_AllElements[i].parentElement.offsetTop, left:SD_AllElements[i].offsetLeft - SD_AllElements[i].parentElement.offsetLeft };
  }
  for( var i=0; i<SD_AllElements.length; i++ ) {
    SD_AllElements[i].style.display = SD_Org[i].computedStyle.display;
    if( SD_AllElements[i].dataset.display == "none" ) {
      SD_AllElements[i].style.visibility = "hidden";
    }
    if( ! SD_Org[i].computedStyle.position.match( /fixed|absolute/i ) ) {
      SD_AllElements[i].style.transition = "all " + SD_TransitionSpeedInMs + "ms";
      SD_AllElements[i].style.position = "relative";
      SD_AllElements[i].style.top = SD_Org[i].computedStyle.top.match( /^[\d-+]/ ) ? parseInt( SD_Org[i].computedStyle.top ) + "px"...