JSFiddle - React, Tailwind, and code Playground

HTML

<table class="modList">
    <tr>
        <td>
            <div id="Serration" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Serration2" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="Redirection" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Redirection2" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="Hello" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Hello2" class="mod" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
</table>

CSS

.mod {
    height: 40px;
    width: 40px;
    background: red;
    overflow: hidden;
    -moz-transition:width 0.3s;
	-webkit-transition:width 0.3s; /* Safari */
    -o-transition:width 0.3s;
}
.locked{
    background:blue;
}

JavaScript

/* Brizingr5: MODLIST */
$('.modList tr td:first-child').mouseenter(function() {
    var target=$(this).closest("tr").find("td:nth-child(2) div");
    if (!target.hasClass("locked")){
      target.css("width", "40px");
    }
}).mouseleave(function() {
    var target=$(this).closest("tr").find("td:nth-child(2) div");
    if (!target.hasClass("locked")){
      target.css("width", "100px");
    }
}).mousedown(function() {
    var target=$(this).closest("tr").find("td:nth-child(2) div");
    if (target.hasClass("locked")){
      target.removeClass("locked");  
    }else{
      target.addClass("locked");  
    }
});