加入和分割元素

Question

我正在使用react和mdl开发一个网站。 我正在浏览谷歌的材料设计，我遇到了加入和分割元素： https://material.google.com/motion/transforming-material.html#transforming-material-joining-dividing

我试图做这件事，但元素的阴影总是出现在兄弟元素之上，这正是不应该发生的事情。

我该如何使这项工作？并防止元素上的阴影出现在它的兄弟之上？

更新： 至于现在我只是试图用简单的html div来防止阴影出现在它的兄弟之上。

HTML：

<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>

的CSS：

div {
  background-color:white;
  text-align:center;
  box-shadow: 0 0 3px 5px black;
}

小提琴：https://jsfiddle.net/81t4v4a5/