将两段HTML放在一起

给定两个blobs的HTML(明确没有说他们是什么)，我如何使他们相邻的布局?

我看到很多问题对它施加了更多的限制:"它们是div元素"，"使用CSS"，"它们需要浮动"，"它们应该是相同的宽度"或"有一些比例"。我只想把它们放在一起。如果屏幕足够宽，它们应该不会影响彼此的内部布局。我希望它看起来一样，如果你把每个屏幕截图作为它自己的页面，并将它们粘贴在一起。如果屏幕不够宽，它应该做一些合理的事情，包括要求侧滚动。我在寻找一个合理正确的答案不管这些斑点是什么。我对CSS没有特别的看法，所以我不在乎它是否被使用，只要它是健壮的，而且一点也不挑剔。

理想的解决方案是由三个字符串组成，这些字符串可以与blob连接并预期可以工作:

concat(Head, blob1, Mid, blob2, Tail)

如果可以扩展到更多的blobs，则可以加分:

concat(Head, blob1, Mid, blob2, Mid, blob3, Tail)

编辑:动机是:在页面的某个地方，我需要把两件事放在一起。我无法控制之前或之后发生的事情，我对这些事情知之甚少(除了它们在语法上是完整的)。无论我做什么，都可能在这一页的多个地方完成，甚至在我得到的一个内容中完成，而我不会知道它。我可能不做任何假设或要求，除了使用一个合理的现代浏览器。

简而言之，任何使用"如果"这个词的答案，可能都不是我想要的。

<div style="display:inline-block">First item.</div>
<div style="display:inline-block">Second item.</div>

<div id="left"></div>
<div id="right"></div>

#left{
  background-color: rgb(0,0,0);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 200px;
}
#right{
  background-color: rgb(137,123,10);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 800px;
}

<div style="float:left; width:50%">left content</div>
<div style="float:left; width:50%">right content</div>