JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Click on the handle and drag in Firefox to see something strange:</h1>

<ul>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12" height="12" class="draghandle" />tag</li>
    <li><img src="http://aol.monadology.net/blogsmith/plugins/easy-tagger/images/draghandle.png" width="12"...

CSS

body {
    font-family: Arial;
    font-size: 11px;
}

h1 {
    font-size: 18px;
    font-weight: bold;
    margin: 1em 0;
}

ul {
    background-color: hsl( 0, 0%, 90% );
    border: 1px solid hsl( 0, 0%, 50% );
    overflow: hidden;
    padding: 1em;
    width: 300px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

li {
    background-color: hsl( 0, 0%, 20% );
    color: hsl( 0, 0%, 100% );
    float: left;
    line-height: 1;
    margin: 0 5px 5px 0;
    padding: 5px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

li img {
    cursor: move;
    padding: 0 5px 0 0;
}

JavaScript

$( 'ul' ).eq( 0 ).sortable({
    handle: '.draghandle',
    opacity: 0.5,
    tolerance: 'pointer'
});

$( 'ul' ).eq( 1 ).delegate( '.draghandle', 'mouseenter', function() {
    var $this = $( this );
    $this.width( $this.width() );
});