JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="ui-widget ui-widget-content ui-corner-all">
    <div class="ui-widget ui-widget-header ui-corner-all" id="header">
        <a id="b1">+</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a>
    </div>
    <div class="ui-widget ui-widget-content" id="content">
        <label for="i1" class="ui-widget" id="l1">Текст:</label><input id="i1" class="in ui-widget ui-widget-content ui-corner-all">
        <label class="ui-widget" id="l2" style="margin-top: 10px">Элементы:</span>
        <div class="ui-widget ui-widget-content ui-corner-all" id="els">
        </div>
    </div>
</div>

CSS

#l1, #l2 {
    display: block;
}

#main {
    width: 50%
}

#content {
    padding: .4em;
    border-width: 0
}

#header {
    padding: .4em;
}

.in {
    margin: 0;
    padding: .4em;
}

#l2 {
    margin-top: .4em;
}

#els {
    max-height: 200px;
    overflow-y: scroll;
}

.elb {
    float: right;
}

.el-l {
    padding: .4em;
    vertical-align: middle;
}

.el-in {
    vertical-align: middle;
}

.el {
    padding: .4em
}

JavaScript

$("a").button();
$("#b1").button().click(function() {
    var el = $("<div class='el ui-widget ui-helper-clearfix'>").append("<label class='el-l ui-widget'>Имя:</label>").append("<input class='in el-in ui-widget ui-widget-content ui-corner-all'>").append($("<a class='elb'>-</a>").button().click(function() {el.remove();}))
    $("#els").append(el);
});