$(".words").draggable({
        revert: function (event, ui) {
            var bRevertingPhrase = this.closest("#drop-em");

            if (!bRevertingPhrase.length) {
                var phraseID = $(this).data("id");
                var phraseHomeID = $(this).parent().data("id");

                //If the child and parent ids don't match, we move the child to the correct parent
                if (phraseID !== phraseHomeID) {
                    var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
                    correctCell.prepend(this);
                }
            }
            return !event;
        }
    });
    $("#drop-em > div").droppable({
        drop: function (ev, ui) {
            $(ui.draggable)
                .detach()
                .css({ top: 0, left: 0 })
                .appendTo($(this).find(".content:empty"));
        }
    });
    $("#phrase > div").droppable({
        drop: function (ev, ui) {
            $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
        }
    });

    const myButton = document.querySelector("#move-text");
    myButton.addEventListener("click", () => {
        fill();
    });

    function fill() {
        const cells = document.querySelectorAll("#phrase > div > span");
        var destination = 0;
        var newLoc = "";
        cells.forEach((cell, index) => {

            newLoc = document.querySelector(
                ".item:nth-child(" + cell.dataset.destination + ") .content ");

            newLoc.append(cell);




            newLoc.classList.add("moved");
        });
    }

        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            counter-reset: columnCount 1 alphaCount;
        }

        h1 {
            text-align: center;
        }

        .wrap {
            display: flex;
            gap: 2rem;
        }

        .grid {
            margin: auto;
            display: grid;
            flex: 1 0 0;
            grid-template-columns: repeat(12, 1fr);
            padding-top: 1.5rem;
        }

        .item {
            position: relative;
            background-color: #f9f9f9;
            border: 1px solid grey;
            aspect-ratio: 1/1;
            counter-increment: columnCount;
            min-width: 0;
            transition: background 1s ease;
        }

        .item:nth-of-type(12n + 1) {
            counter-increment: alphaCount;
        }

        .item:nth-of-type(12n + 1)::before {
            content: counter(alphaCount, upper-alpha);
            position: absolute;
            display: flex;
            align-items: center;
            top: 0;
            bottom: 0;
            left: -1.75rem;
            color: red;
            pointer-events: none;
        }

        .item:nth-of-type(n + 13)::after {
            display: none;
        }

        .item::after {
            content: counter(columnCount);
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top: -1.75rem;
            color: red;
            pointer-events: none;
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100%;
            overflow: auto;
            color: #000;
            padding: 1rem;
            word-wrap: break-word;
        }

        .words {
            cursor: move;
            transition: padding 0.5s ease;
        }

        .content:has(.ui-draggable-dragging) {
            overflow: visible;
        }

        .ui-droppable-active .content {
            overflow: visible;
        }

        .words.ui-draggable-dragging {
            background: blue;
            padding: 5px 10px;
            border-radius: 6px;
            z-index: 999;
            color: #fff;
            display: block;
            width: 50px;
            height: 50px;
            overflow: hidden;
        }

        #phrase {
            color: #fff;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: row;
            margin: 2rem 0;
        }

        #phrase>div {
            margin: 0 10px 10px;
            padding: 5px 10px;
            background: #007bff;
            border: 2px solid #007bff;
            border-radius: 6px;
            color: #fff;
            min-width: 100px;
        }

        #phrase>div:empty {
            background: #fff;
            border-style: dashed;
            padding: 0px 25px;
            min-height: 30px;
        }

        .moved {
            animation: fade 3s ease;
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
                background: red;
            }
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
    <div id="phrase">

... [Your original HTML content continues here] ...