JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>demonstrate jQuery UI bug</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript">
        $().ready( function () {
            $('div.container').sortable({
                items: 'div.tile',
                placeholder: 'sortHelper',
                update: function (event, ui) {
                    var str = $('div.container').sortable('serialize');
                    alert("serialized: " + str);
                },
            });
        });
    </script>
</head>
<body>
    <div class=container>
        <div id="tile_1" class=tile>Tile #1</div>
        <div id="tile_2" class=tile>Tile #2</div>
        <div id="tile_3" class=tile>Tile #3</div>
        <div id="tile_4" class=tile style="display: none;">Tile #4</div>
        <div id="tile_5" class=tile>Tile #5</div>
        <div id="tile_6" class=tile>Tile #6</div>
    </div>
</body>
</html>

CSS

div.container {
            background-color: #cccccc;
            padding: 3px;
            border: solid 1px #999999;
            width: 200px;
        }
        div.tile {
            border: solid 2px blue;
            padding: 2px;
            margin: 1px;
            height: 20px;
            background-color: #eaeaea;
        }
        .sortHelper {
            border: 2px dashed #666;
            height: 20px;
            width: auto !important;
        }