detecting "collision" between 2 divs javascript

I want to detect a collision between two divs and I’ve tried to do that using the offsetLeft and offsetTop of each one of the divs and by using getBoundingClientRect(). but none of these work

Is there a way I can get the exact coordinates in which these two elements touch?

How can I do this?

codepen -> https://codepen.io/mullerz/pen/vYNjXWQ

<button type="button">Start Game</button>
    <div class="big">
        <div class="blue"></div>
        <div class="red"></div>
    </div>

.big{
        width:400px;
        height:400px;
        outline : 1px solid red;
        margin: 0 auto;
        position: relative;
    }

    .blue{
        width:20px;
        height:20px;
        background:blue;
        position:absolute;
    }
    .red{
        width:20px;
        height:20px;
        background:red;
        position:absolute;
    }

const bigDiv = document.querySelector(".big")
        const blue = document.querySelector(".blue")
        const startBtn = document.querySelector("button")
        const red = document.querySelector(".red")
        const bigDivDimensions = bigDiv.getBoundingClientRect();
        let speed = 5;
        //let counter = 0;


        let bigDivLeft = bigDivDimensions.left;

        startGame();
function random(){return Math.floor(Math.random()*(bigDivDimensions.width-40));}

function startGame(){
    //let randomSnake = Math.floor(Math.random()*(bigDivDimensions.width-40));
    //let randomApple = Math.ceil(Math.random()*(bigDivDimensions.width -40));
    blue.style.left = random() + "px"
    blue.style.top = random() + "px"
    red.style.left = random()+ "px"
    red.style.top = random() + "px"
    }

function move(e){
    let blueX = blue.offsetLeft;
    let blueY = blue.offsetTop;
    let key = e.keyCode;

    if(key !== 37 && key !== 38 && key !== 39 && key !== 40 ){return}   
    else if(key === 37 && blueX > 3){ blueX -= speed; }
    else if(key === 38 && blueY > 3){ blueY -= speed; }
    else if(key === 39 &&  blueX < (bigDivDimensions.width - 25) ){ blueX  += speed; }  
    else if(key === 40 && blueY < (bigDivDimensions.height -23)){ blueY += speed; }

    blue.style.left = blueX + "px";
    blue.style.top = blueY + "px";
    colision(blueX, blueY)
}

function colision(blueX,blueY){
    /* let redX = red.offsetLeft;
       let redY = red.offsetTop; 
       if(redY === blueY || redX == blueX){console.log("hit")}  */

       let redRect = red.getBoundingClientRect();
       let blueRect = blue.getBoundingClientRect();

      if((redRect.top < blueRect.bottom) ||(redRect.bottom < blueRect.top) || (redRect.right > blueRect.left) || (redRect.left < blueRect.right)){
        console.log("hit")
      } 
}

startBtn.addEventListener("click", startGame)
document.addEventListener("keydown", move)