<div class="demo">
<ul>
<li>
<a class="add" href="javascript:void(0)">+ add a div</a>
</li> <li>
<a class="remove" href="javascript:void(0)">- remove a div</a>
</li>
</ul>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div style="padding-bottom:20px;float:none;clear:both;"></div>
.demo {
padding:1em;
}
.demo ul {
list-style-type: none;
padding: 10px;
}
.demo li {
display: inline;
margin-right: 20px;
}
.demo a {
text-decoration: none !important;
color: red;
}
.demo .item {
position: relative;
float: left;
width: calc(33.33% - 20px);
height: 100px;
background: lightgrey;
margin: 10px;
}
.demo .item:before {
content: '33.33%';
text-align: center;
display: block;
width: 100%;
height: 100%;
transform: translatey(40%);
-webkit-transform: translatey(40%);
}
.demo .item:hover:before {
color: white;
}
.demo .item:hover {
background-color: red;
cursor: pointer;
}
.demo .item:nth-child(3n+1):last-child {
width: calc(100% - 20px);
}
.demo .item:nth-child(3n+1):last-child:before {
content: '100%' !important;
}
.demo .item:nth-child(3n+2):last-child {
width: calc(66.66% - 20px);
}
.demo .item:nth-child(3n+2):last-child:before {
content: '66.66%' !important;
}


$(document).ready(function () {

  $(".add").click(function () {
      $( ".wrapper" ).append( "<div class='item'></div>" );
});

$(".remove").click(function () {
      $( ".item:last" ).remove();
});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js