JSFiddle - React, Tailwind, and code Playground

HTML

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

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

SCSS

.panel {    
  width: 400px; 
  height: 120px;   
  border: 1px solid #fab6b0; 
  background-color: #fab6b0;
}

#wrapper {    
   border: 2px solid blue;
   height: 110px; 
   overflow: hidden; 
}
#wrapper:after {
    display: block;
    clear: both;
    content: '';
}
  
.w {
   /*margin-top: 1px;
   margin-bottom: 8px;
   padding: 5px;
   float: none;
   overflow: hidden;
   background-color: cadetblue; */ 
   /****/
    padding: 0;
	overflow: hidden;
	background-color: silver;
	height: 100%;
	position: relative; 
}

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

.w_inner{
		border: 1px solid red;
		height: 20px;
		position: relative;
		top: 50%;
		margin-top: -10px;
	}

JavaScript

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

$('#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);
    $('.panel').find('#wraper').css('height', 110);
    console.log($('.panel').find('#wraper'));
    elem.append(imgKv);
});