JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button3" class="button">Move Both</button>

<div id ="divOne" class="mover">
  <button id="button" class="button">Move Div 1</button>
</div>

<div id ="divTwo" class="mover">
  <button id="button2" class="button">Move Div 2</button>
</div>

CSS

.mover {
  background: red;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
  transition: all 0.5s ease-out;
}

.mover.moved {
  top: 200px;
}

#divTwo {
  background: blue;
  left: 300px;
}

JavaScript

var el = document.getElementById('button');

el.addEventListener('click', function() {
  divOne.classList.toggle('moved')
}, false);

var el2 = document.getElementById('button2');

el2.addEventListener('click', function() {
  divTwo.classList.toggle('moved')
}, false);

var el3 = document.getElementById('button3');

el3.addEventListener('click', function() {
  divOne.classList.toggle('moved')
  divTwo.classList.toggle('moved')
}, false);