JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<table>
    <tr>
        <td> <a id="myClick">Click to toggle</a> 
        </td>
    </tr>
    <tr class="row">
        <td>
            <div class='bigWrapper'>
                <div class="imgWrapper"> <a class="imgItem"><img id="myImg" src="http://rndimg.com/ImageStore/OilPaintingBlue/50x50_OilPaintingBlue_e0f5d829a28f48558b6b61a2d6c5e6c2.jpg" /></a>

                </div>
                <div class="titleWrapper"> <span class="t">[SOMETHING]</span>

                </div>
            </div>
        </td>
    </tr>
    <table>

CSS

div.imgWrapper {
    float: left;
}
img#myImg {
    height:40px;
    width: 40px;
}
td {
    background-color: red;
}
div.bigWrapper {
    background-color: blue;
    display: table-cell;
    vertical-align: middle;
}
div.titleWrapper {
    display: table-cell;
    vertical-align: middle;
    background-color: green;
}
a.imgItem, span.t {
    background-color: teal;
}
div.imgWrapper {
    height: 40px;
    width: 40px;
}

JavaScript

$(function () {
    $("div.imgWrapper").hide();

    $("a#myClick").on("click", function () {
        $("div.imgWrapper").animate({
            width: "toggle"
        });
    });
});