JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="top">
        <!-- ko foreach:boxes -->
        <span class="box" data-bind="text:text">            
        </span>
        <!-- /ko -->
        <span class="box new">
            <button data-bind="click:addBox">+</button>
        </span>
    </div>
    <div id="chart">
       Chart
    </div>
</div>

CSS

body{margin:0}
.wrapper{
    position:absolute;
    border:1px solid red;
    height:calc(100% - 2px); /* account for border in this example */
    width:calc(100% - 2px); /* account for border in this example */
}

.top{
    border: 1px solid magenta;
    padding-bottom:5px
}

#chart{
    border: 1px solid blue;
    
}

.box {
    width:150px;
    height:50px;
    border: 2px solid black;
    display:inline-block;
    vertical-align:top;
    margin:5px 0 0 5px
}

.box.new{
    border:1px dashed black;
}
.box.new button{
    display:inline-block;
    width:100%;
    height:100%;
    text-align:center;   
    font-size:3em;
    border:none;
    background:none;
}

JavaScript

function ViewModel(){
    var self = this;
    
    self.boxes = ko.observableArray([new Box(0)]);
    
    self.addBox = function(){
        self.boxes.push(new Box(self.boxes().length));
    }
}

function Box(index){
    self.text = "Box " + index;
}

ko.applyBindings(new ViewModel())