JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul class="column" id="sortable">
        <li>
            <div class="block">
                <div class="menuedit_buttons_block">
                    <a class="menuedit_button menuedit_button_set" style="cursor: pointer;"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                </div>
                <div class="menuedit_buttons_block">
                    <a class="menuedit_button" style="cursor: pointer;">+</a>
                    <a class="menuedit_button menuedit_button_set" title="Гавайская Т 30 см"></a>
                    <a class="menuedit_button menuedit_button_set" title="Гавайская Т 35 см"></a>
                </div>
            </div>
        </li>
        <li>
            <div class="block">
                <div class="menuedit_buttons_block">
                    <a class="menuedit_button menuedit_button_set" style="cursor: pointer;"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                </div>
                <div class="menuedit_buttons_block">
                    <a class="menuedit_button" style="cursor: pointer;">+</a>
                    <a class="menuedit_button menuedit_button_set" title="Гавайская Т 30 см"></a>
                    <a class="menuedit_button menuedit_button_set" title="Гавайская Т 35 см"></a>
                </div>
            </div>
        </li>
        <li>
            <div class="block">
                <div class="menuedit_buttons_block">
                    <a class="menuedit_button menuedit_button_set" style="cursor: pointer;"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                    <a class="menuedit_button menuedit_button_set"></a>
                </div>
 ...

CSS

ul.column{
          width: 100%;
          padding: 0;
          margin: 10px 0;
          list-style: none;
        }
        ul.column li {
          float: left;
          width: 100%;
          padding: 0;
          margin: 5px 0;
          display: inline;
        }
        .block {
          height: 108px;
          font-size: 1em;
          margin-right: 10px;
          padding: 20px;
          background: #e3e1d5;
        }
        .block h2 {
          font-size: 1.8em;
        }
        .menuedit_buttons_block {
            margin: 0 5px;
        }

        a.menuedit_button, .menuedit_button {
            display: block;
            width: 31%;
            height: 50px;
            background-color: #ddd;
            float: left;
            margin: 0 1% 6px 1%;
            color: #eee;
            text-decoration: none;
            font-size: 24px;
            line-height: 45px;
            text-align: center;
        }

        a.menuedit_button_set, .menuedit_button_set {
            background-color: #F6A840;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .sortable-placeholder {
          height: 145px;
          width: 100%!important;
          padding: 0!important;
          margin: 5px 0!important;
          display: inline!important;
          border: 1px dashed #4999DA; 
          position: relative;
          z-index: 6;
        }
@media (min-width: 500px) {
    
        ul.column li {
          width: 50%;
        }
        .sortable-placeholder {
          width: 50%!important;
        }
}
@media (min-width: 700px) {
    
        ul.column li {
          width: 25%;
        }
        .sortable-placeholder {
          width: 25%!important;
        }
}

JavaScript

$("#sortable").sortable({
    revert: true,
    placeholder: "sortable-placeholder",
    stop: function (event, ui) {
        if (!ui.item.data('tag') && !ui.item.data('handle')) {
            ui.item.data('tag', true);
            ui.item.fadeTo(400);
        }
    }
});

$("ul, li").disableSelection();


/*function smartColumns() {
            $("ul.column").css({ 'width': "100%" });

            var colWrap = $("ul.column").width();
            var colNum = Math.floor(colWrap / 250);
            var colFixed = Math.floor(colWrap / colNum);

            $("ul.column").css({ 'width': colWrap });
            $("ul.column li").css({ 'width': colFixed });
        }

        smartColumns();

        $(window).resize(function () { 
            smartColumns();
        });*/