如何确定div中的空白空间并为其添加内容？

Question

我有一个宽度为100px的容器，并且我有5组不同大小的div，可通过单击相应按钮来动态填充该容器。我试图弄清楚如何找到容器中的空白空间来放置合适的元件。例如，如果先放置80x80，然后在其下方放置100x80。第一个元素尚未达到最大宽度，并且具有20x80的开放空间。使用jQuery，我如何确定80x80旁边的空白区域应放置20x80的下一个元素？

我试图在Google上找到解决方案，但未能返回与我尝试执行的结果类似的任何结果。

$("#Test").on('click', function() {
  $('.fill-container').append("<div class='box1'></div>")
});
$("#Test2").on('click', function() {
  $('.fill-container').append("<div class='box2'></div>")
});
$("#Test3").on('click', function() {
  $('.fill-container').append("<div class='box3'></div>")
});
$("#Test4").on('click', function() {
  $('.fill-container').append("<div class='box4'></div>")
});
$("#Test5").on('click', function() {
  $('.fill-container').append("<div class='box5'></div>")
});

.fill-container {
  width: 100px;
  height: 600px;
  outline: black solid 1px;
}

.controls {
  margin-top: 15px;
}

.box1 {
  width: 50px;
  height: 70px;
  background-color: blue;
  float: left;
}

.box2 {
  width: 50px;
  height: 70px;
  background-color: green;
  float: left;
}

.box3 {
  width: 80px;
  height: 80px;
  background-color: red;
  float: left;
}

.box4 {
  width: 20px;
  height: 80px;
  background-color: yellow;
  float: left;
}

.box5 {
  width: 100px;
  height: 80px;
  background-color: orange;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fill-container"></div>
<div class="controls">
  <button id="Test">50x70</button>
  <button id="Test2">50x70</button>
  <button id="Test3">80x80</button>
  <button id="Test4">20x80</button>
  <button id="Test5">100x80</button>
</div>