HTML CSS显示3个相邻的表

Question

我正在使用<section></section>。

我目前有两个表并排比较两个按原样显示的不同人的信息。但是我想在带有箭头的两个数据表之间添加第三个表，并且一旦在原始两个表之间添加第三个表，原始两个表就会向下移动，而不是像只是在页面顶部那样原来的两个。

CSS：

section { 
height: 100%;
  width: 45%;
  display: inline-block;
 }

 section.compare { 
height: 100%;
  width: 8%;
  display: inline-block;
 }

不添加目前仅<section class="compare"></section"的中间部分

这些表可以很好地彼此相邻，一旦添加这些表，即使宽度不超过100％，它们也会跳下页面？

编辑：当我将中间部分从上方更改为<section class="compare"><center>text</center></section>

这些表然后跳回到页面上应该位于的位置？但是，在此比较类部分添加另一个表会使它们跳回原来的页面。