JSFiddle - React, Tailwind, and code Playground

HTML

<div class='panel'>
    <div id="wrapper">
        <div id='m' class='new'>
            
        </div>
    
        <div class="w">
        </div>   
    </div>
</div> 

<input type="button" value="del" id="btnDel">
<input type="button" value="add" id="btnAdd">

SCSS

.panel {    
  width: 400px; 
  height: 100px;   
  border: 1px dotted white; 
  background-color: blue;
}

#wrapper {    
   border: 2px solid black;
   height: 120px; 
   overflow: hidden; 
}
#wrapper:after {
    display: block;
    clear: both;
    content: ''; 
}
  
.w {  
   padding: 5px;
   float: none;
   overflow: hidden;
   background-color: silver;
    
    /*========== Чтобы было посередине: ===========*/
    position: relative;/*это чтобы top: -10px; сработал*/
    margin-top: -10px; /**/
    top: 50%;/*здесь фикс. высота блока*/
    /*border:1px solid red;/*если закомментить, то блок не сдвигается при появлении блока new,
    а если раскомментить, то по нажатию на add он просто */
}

.new {
   /*border: 2px solid fuchsia;*/
   overflow: hidden;
   float: left;   
}

JavaScript

$('#btnDel').click(function(){
    var elem = $('.kv');
    //console.log(elem.length);
    
    elem[elem.length - 1].remove();
    $('#m').hide();
}); 

$('#btnAdd').click(function(){
    var elem = $('#m'),
       imgKv = '<img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" class="item kv"/>';
    //console.log(elem.length);
    elem.show();
    elem.append(imgKv);
});