JSFiddle - React, Tailwind, and code Playground

by Lal Prakash

HTML

<div id='container'>
  <div id='headerbar'>Header Div</div>
  <div id='sidebar'>
    <input type="button" value="O" id="calculate" onclick="add()" />
    <br />
    <br />
    <br />
    <br />
  </div>

</div>

CSS

body {
  margin: 0 0;
}

#container {
  border: 1px solid blue;
  white-space: nowrap;
  overflow: auto;
  font-size: 0;
}

#container > * {
  font-size: 8px;
  font-family: 'Open Sans', sans-serif;
}

#headerbar {
  font-size: 30px;
  color: white;
  padding-left: 10px;
  border: 1px solid darkgrey;
  height: 50px;
  background-color: darkslateblue;
}

#sidebar {
  display: inline-block;
  color: black;
  border: 1px solid darkgrey;
  width: 50px;
  height: 100vh;
  vertical-align: top;
  background-color: lightgrey;
  text-align: center;
  padding-top: 10px;
}

.content {
  display: inline-block;
  width: 200px;
  height: 100vh;
  border: 1px solid lightslategrey;
  margin: 0 1px 0 0;
  vertical-align: top;
  background-color: lightsteelblue;
}

.close {
  display: inline-block;
  padding: 2px 5px;
  background: #ededed;
  float: right;
}

.close:hover {
  float: right;
  display: inline-block;
  padding: 2px 5px;
  background: #ccc;
  color: #fff;
}

JavaScript

function add() {
  var responseBox = document.createElement("DIV"); //create <div>
  var spanclose = document.createElement("span");
  var spantext = document.createTextNode("X");
  spanclose.appendChild(spantext);
  spanclose.setAttribute("class", "close");
  responseBox.setAttribute("class", "content");
  responseBox.setAttribute("onclick", "remove(this)");
  responseBox.appendChild(spanclose);
  document.getElementById('container').appendChild(responseBox);
}
function remove(elt) {
  elt.parentNode.removeChild(elt);
}