JSFiddle - React, Tailwind, and code Playground

HTML

<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">HEART TO HEART</span>

<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">EYE TO EYE</span>

<ol>
    <li>Our relationship was going badly wrong, but after we sat down and had a
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>talk we decided to try again. We're a lot happier now.</li>
    <li>I wish my wife and my sister could agree about some things. The problem is that they just can't see
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>and argue about everything.</li>
</ol>

CSS

ol {
    margin-top: 24px;
}
.draggable {
    width: 120px;
    padding: 1px;
    border: 1px solid gray;
    margin: 0px;
    text-align:center;
}
#div1, #div2 {
    display:inline-block;
    min-width:150px;
    min-height:10px;
    border-style:solid;
    border-width:0px;
    border-bottom-width:2px;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.target.innerHTML += ' ';
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
    document.getElementById(data).className = "";
}