Html 连接和分割元素

我正在使用react和mdl开发一个网站。 我正在浏览谷歌的材料设计，我遇到了连接和分割元素：

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

我怎样才能做到这一点？并防止元素上的阴影出现在其同级之上

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

Html:

---

小提琴手：

你能把你的密码放进去吗？CSS，React，JSX？@lhrec_106更新了这个问题。你能把你的代码放进去吗？CSS，React，JSX？@lhrec_106更新了问题。

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

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