JSFiddle - React, Tailwind, and code Playground

HTML

<p>Colliding? <span id="result">false</span>

<div id="div1">
</div><br/>
<div id="div2">
</div>

CSS

<style>
 
    .touch{
      margin:20px;
       
    }
    .remTouch{
      margin:-20x;
      transition: margin 1s;
    }
    #div1 { 
      width: 100px; height: 100px; background-color: pink;
      border-radius: 50%;
      opacity: 0.7;
    }
    #div2 { 
      width: 200px; height: 200px; background-color: green; 
      position: fixed;
      top: 150px;
      left: 10px;
      border-radius: 50%;
      opacity: 0.7;
      -moz-transition: all 250ms ease-out;
      -webkit-transition: all 250ms ease-out;
    }
  </style>

JavaScript

function collision($div1, $div2) {
          var x1 = $div1.offset().left;
          var y1 = $div1.offset().top;
          var

 h1 = $div1.outerHeight(true);
      var w1 = $div1.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $div2.offset().left;
      var w2 = $div2.outerWidth(true);
      var y2 = $div2.offset().top;
      var h2 = $div2.outerHeight(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;

      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
      return true;
    }


window.setInterval(function() {
    $('#result').text(collision($('#div1'), $('#div2')));
    if( collision($('#div1'), $('#div2')) == true ){
      var newTop =  $('#div1').offset().top + 150;
      var newLeft =  $('#div1').offset().left + 10;
      console.log(newTop);
      $('#div2').css('top', newTop);
      $('#div2').css('left', newLeft);
    }
    if( collision($('#div1'), $('#div2')) == false ){
      $('#div2').addClass("remTouch");
      $('#div1').addClass('remTouch');
    }
}, 200);



$('#div1').draggable();