<style>
div {
  width: 80px;
  word-break: break-all;
}
.inline-block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: blue;
}
</style>
<div id=text_container>some text content</div>
<div id=mixed_container>some <div class=inline-block></div> and more</div>
<script>
document.body.offsetHeight;
text_container.appendChild(document.createTextNode("and more"));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode(" and more"));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode("and more "));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode(" and more "));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode("and some more more"));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode("and more more more"));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode(" and more more more more more "));
document.body.offsetHeight;
text_container.appendChild(document.createTextNode("and this last one."));


function createInlineBlock() {
  let inline_block = document.createElement("div");
  inline_block.className = "inline-block";
  return inline_block;
};

document.body.offsetHeight;
mixed_container.appendChild(document.createTextNode("and more"));
document.body.offsetHeight;
mixed_container.appendChild(document.createTextNode(" and more"));
document.body.offsetHeight;

mixed_container.appendChild(createInlineBlock());
mixed_container.appendChild(document.createTextNode("and more "));
document.body.offsetHeight;

mixed_container.appendChild(document.createTextNode(" and more "));
document.body.offsetHeight;

mixed_container.appendChild(document.createTextNode("and some more more"));
mixed_container.appendChild(createInlineBlock());
document.body.offsetHeight;

mixed_container.appendChild(document.createTextNode("and more more more"));
document.body.offsetHeight;
mixed_container.appendChild(document.createTextNode(" and more more more more more "));
mixed_container.appendChild(createInlineBlock());

document.body.offsetHeight;
mixed_container.appendChild(document.createTextNode("and this last one."));

</script>