JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<table>
    <tr>
        <td>1</td>
        <td><img src="http://i44.tinypic.com/2n20200.jpg"/>
        <td>
            <input type="checkbox" class="tgleResize" id="img1" />
            <label for="img1">Resizable</label>
            <button type="button" class="Add">Add</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="http://i42.tinypic.com/j8cphs.jpg"/>
        <td>
            <input type="checkbox" class="tgleResize" id="img2" />
            <label for="img2">Resizable</label>
            <button type="button" class="Add">Add</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="http://i40.tinypic.com/dh3jah.jpg"/>
        <td>
            <input type="checkbox" class="tgleResize" id="img3" />
            <label for="img3">Resizable</label>
            <button type="button" class="Add">Add</button>
        </td>
    </tr>
</table>
            
<div id="parentContainer">
    <div id="nonresizable_IMGS"></div>
    <div id="resizable_IMGS"></div>
</div>

CSS

body,div {
 padding: 0px; margin 0px;  
 font-size: 11px;
 font-family: arial, helvetica, sans-serif;
}

#parentContainer {
 margin: 10px 10px 0px 10px;  
}

/* Manually spaces itself below the nonresizable_IMGS div */
#resizable_IMGS {
 margin-top: 105px;  
}

.imgContainer {
   display: inline-block;   
}

.imgContainer img {
 padding: 10px;
 width: 148px; height: 116px; 
 border: solid 1px #aaaaaa;    
 background-color: #f0f0f0;
 position: absolute; /* absolutely position the element so that it would not move
                        when another image below/above it is resize */
}

.imgContainer img, tr td img {
 width: 128px;  height: 96px; 
}

.Add {
 display: block;  
 margin-top: 4px;
}

tr {
   display: table-cell;
}

tr td {
 padding: 0px 6px;   
}

tr td img {
 padding: 10px;  
 border: solid 1px #aaaaaa;    
 background-color: #f0f0f0;   
}

JavaScript

$(function() {
    $("#img1,#img2,#img3,.Add").button();

    $(".Add").click(function() {
        var $template;
        var $container;
        var resizable = $(this).closest("tr").find(".tgleResize").is(":checked");
        var source = $(this).closest("tr").find("img").attr("src");

        $template = $("<div class='imgContainer'><img src='" + source + "'/></div>");
        if (resizable == true) {
            $template.find("img").addClass("resizable");
            $container = $("#resizable_IMGS");
        }
        else {
            $container = $("#nonresizable_IMGS");
        }
        $template.draggable();
        
        /* I added this new line to manually position the images */
        if($container.children("div").length != 0){
            $template.css("margin-left","152px");
        }
        
        $container.append($template);
        $("#resizable_IMGS").find("img.resizable:last-child").resizable({
            minHeight: 119,
            minWidth: 150
        });
        $(this).closest("tr").fadeOut("normal", function() {
            $(this).remove();
        });
    });
});