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: 140px;
border: 1px solid #fab6b0;
background-color: #fab6b0;
}
#wrapper {
border: 2px solid blue;
max-height: 120px;
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: 10px;
position: relative;
top: 50%;
margin-top: -5px;
}
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);
});