JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="empty">
            
          </div>
        </div>
        <div class="col-md-6">
          <div class="empty">
          </div>
        </div>
      </div>
    </div>

CSS

.fill {
  background-image: url('https://source.unsplash.com/random/150x150');
  height: 150px;
  width: 150px;
  cursor: pointer;
}

.hold {
  border: solid 5px #ccc;
}

.empty {
  height: 56rem;
    width: 36rem;
    margin: 10px;
    border: solid 3px salmon;
    background: white;
  }


.hovered {
  background: #f4f4f4;
  border-style: dashed;
}

JavaScript

const empties = document.querySelectorAll('.empty');
var side=sessionStorage.getItem("side")==""?left:sessionStorage.getItem("side");
console.log(side)
if(side=="right"){
  empties[1].innerHTML = '<div class="fill" draggable="true"> </div>';
}
else{
 empties[0].innerHTML='<div class="fill" draggable="true"> </div>';
}
const fill = document.querySelector('.fill');
// Fill listeners
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);

// Loop through empty boxes and add listeners
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}

// Drag Functions

function dragStart() {
this.className += ' hold';
setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
this.className = 'fill';
}

function dragOver(e) {
e.preventDefault();
}

function dragEnter(e) {
e.preventDefault();
this.className += ' hovered';
}

function dragLeave() {
this.className = 'empty';
console.log(side)
sessionStorage.setItem("side", side=="left"?"right":"left");
}

function dragDrop() {
this.className = 'empty';
this.append(fill);
}