gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@9.3.0/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/gridstack@9.3.0/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@9.3.0/dist/gridstack-extra.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<span>Content left:</span>
<span id="output0" class="grid-stack-first"></span>
<br />
<span>Content right:</span>
<span id="output1" class="grid-stack-last"></span>
<br />

<div class="container">
  <div class="grid-stack grid-stack-first"></div>
  <div class="grid-stack grid-stack-last"></div>  
</div>

CSS

.container {
  display: flex;
}

.grid-stack {
  flex-grow: 1;  
}

.grid-stack-first {
  background: lightgoldenrodyellow;
}

.grid-stack-last {
  background: lightgray;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  column: 2,
  row: 5,
  cellHeight: "50px",
  acceptWidgets: true,
  float: true
};
var grids = GridStack.initAll(options);

grids[1].addWidget({x: 0, y: 0, content: "A"});
grids[1].addWidget({x: 1, y: 0, content: "B"});

grids[0].on('added', () => save(0));
grids[1].on('added', () => save(1));
grids[0].on('change', () => save(0));
grids[1].on('change', () => save(1));
grids[0].on('removed', () => save(0));
grids[1].on('removed', () => save(1));

save = function (index) {
  const content = grids[index].save(true);
  const output = JSON.stringify(content);

  document.getElementById("output"+index).innerText = output;
}

save(0);
save(1);