JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="outercontainer">
  <div id="toprow">
    <div id="topleft">
    </div>
    <div id="topright">
    </div>
  </div>
  <div id="bottomrow">
    <div id="bottomleft">
    </div>
    <div id="bottomright">
    </div>
  </div>
</div>
<div id="dragme">
</div>

CSS

#outercontainer {
  width: 75%;
  
}
#toprow {
  height: 100px;
  border: 1px solid black;
}
#bottomrow {
  height: 300px;
  border: 1px solid black;
}
#topleft {
  width: 30%;
  height: 100%;
  border: 1px solid black;
}
#bottomleft {
  width: 30%;
  height: 100%;
  border: 1px solid black;
}
#dragme {
  width: 75px;
  height: 75px;
  background-color: red;
}

JavaScript

$("#dragme").draggable();

// previous method