创建多重叠加

Question

所以我今晚一直试图为我的网页制作一个合适的div叠加层，但无法正确排列。我想要得到以下效果。我有1号和2号但是如何得到3号。另外如何使我的#smoothinline_back{}或浅灰色方块比第1张图片中的深灰色方块小。

我想要获得的东西：

我现在有什么：

SO基本上，我如何让图像2看起来像图像1？

当前CSS

#smoothinline {
width: 40%;
margin-left: auto ;
margin-right: auto ;
padding-top: 20px;
padding-bottom: 20px;
background-color: #CCC;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: -2;
-webkit-box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, .2);
box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, .2);
}

 #smoothinline_back {
width: 100%;
margin-top: 10px;
margin-left: auto ;
margin-right: auto ;
padding-top: 10px;
padding-bottom: 10px;
background-color: #E6E6E6;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: -3;
 }

 .displayleft {
padding-top: 75px;
float: left;
 }

.displayright {
padding-top: 75px;
float: left;
 }

HTML

<div id="smoothinline_back">
<div class="displayleft">
 TEXT 1
</div>

<div id="smoothinline">
TEXT 2
</div>

</div>