JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent" style="background: black;">
    <table>
        <tr>
            <td>
                <div id="Serration" class="WeaponInfobox transition">
                    Serration
                </div>
            </td>
            <td>
                <div id="Serration2" class="WeaponInfobox transition"> 
                    Serration2
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="Redirection" class="WeaponInfobox transition">
                    Redirection
                </div>
            </td>
            <td>
                <div id="Redirection2" class="WeaponInfobox transition">
                    Redirection2
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="Hello" class="WeaponInfobox transition">
                    Hello
                </div>
            </td>
            <td>
                <div id="Hello2" class="WeaponInfobox transition">
                    Hello2
                </div>
            </td>
        </tr>
    </table>
</div>

CSS

.WeaponInfobox {
    height: 40px;
    width: 40px;
    background: red;
    overflow: hidden;
}

.transition {
    -moz-transition:width 0.3s;
	-webkit-transition:width 0.3s; /* Safari */
    -o-transition:width 0.3s;
}

JavaScript

/* Brizingr5: MODLIST */

var WeaponInfobox_x = false;
var WeaponInfobox_y;
var WeaponInfobox_obj = new Object();

$('.parent').mouseenter(function() {
    $('.parent').css('background', 'pink');
    $('.WeaponInfobox').css('width', '80px');
});

$('.parent').mouseleave(function() {
    $('.parent').css('background', 'black');
    $('.WeaponInfobox').css('width', '40px');
});

$('.parent').mousedown(function() {
    $('.parent').css('background', 'gray');
});