JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div class="content">
    <div class="portlet">
        <div class="portlet-header"><h6>Portlet 1</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 2</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet fixed">  
        <div class="portlet-header"><h6>Portlet 3 (fixed)</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 4</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 5</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 6</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
</div>

CSS

.content
{
    height:600px;
}
.portlet 
{ 
    margin: 0 15px 15px 0; 
    height: 240px;
    width: 25%;
    float:left;
    overflow-x: none;
}
.portlet-header 
{ 
    margin: 0.3em; 
    padding-bottom: 4px; 
    padding-left: 0.2em; 
}
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; overflow-x: none;}
.ui-sortable-placeholder * { visibility: hidden; background-color: rgb(242, 245, 247); }

JavaScript

$(function() {
    
    $( ".content" ).sortable({
        delay: 100,
        distance: 10,
        handle: '.portlet-header',
        items: '>:not(.fixed)',
        start: function(e, ui)
                    {
                        $(ui.placeholder).hide(300);
                        $('.fixed', this).each(function(){
                            var $this = $(this);
                            $this.data('pos', $this.index());
                        });
                    },
        change: function(e,ui) 
                    {
                        $(ui.placeholder).hide().show(300);
                        $sortable = $(this);
                        $statics = $('.fixed', this).detach();
                        $helper = $('<div class="portlet" style="background-color:#000"></div>').prependTo(this).hide();
                        $statics.each(function()
                        {
                            var $this = $(this);
                            var target = $this.data('pos');
                            $this.insertAfter($('.portlet', $sortable).eq(target));
                        });
                        $helper.remove();
                    }
  });
    $( ".content" ).disableSelection();
    
    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
    .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
    .end()
    .find( ".portlet-content" );

  $( ".portlet-header .ui-icon" ).click(function() {
    $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
  });

    
});