JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div class="popover">
    <div class="popover_contents"><div class="stuff">Hello</div><div class="stuff">Goodbye</div></div>
</div>
<button id="add_item_button">Add Item</button> <button id="remove_item_button">Remove Item</button>

CSS

.popover{
    background:#ccc;
    width:auto;
    min-width:200px;
    max-width:400px;
    border:1px solid #ccc;
    margin:1em;
    float:left;
    position:absolute;
    top:20px;
    left:10px;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
        box-sizing:border-box;

}

.popover_contents{
    border:1px solid #c07712;
    width:auto;
    height:auto;
    min-height:20px;
    min-width:20px;
}

.stuff{
    height:30px;
    width:90px;
    border:1px solid #123456;
    display:inline-block;
}

.big{
    height:100px;
    width:200px;
}

JavaScript

$('.stuff').mousedown(function(evt){
    $(this).toggleClass('big');
    evt.preventDefault();
    return false;
});

$('#add_item_button').mouseup(function(evt){
  $('.popover_contents').append('<div class="stuff">item</div>');
});

$('#remove_item_button').mouseup(function(evt){
  $('.popover_contents').children().last().remove();
});