如何将div动态定位在另一个下方？

<div id="sourceDiv">源div</div>
<div id="targetDiv">目标div</div>

#sourceDiv {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

#targetDiv {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
}

const sourceDiv = document.getElementById("sourceDiv");
const targetDiv = document.getElementById("targetDiv");

const sourceRect = sourceDiv.getBoundingClientRect();
const targetRect = targetDiv.getBoundingClientRect();

sourceDiv.style.top = targetRect.bottom + "px";
sourceDiv.style.left = targetRect.left + "px";