Создание наложений Mutli-Div

Question

Итак, я пытался сделать правильное наложение div для своей страницы этим вечером и не могу выстроить его правильно. Я пытаюсь получить эффект ниже. Номер 1 и номер 2 у меня есть, но как мне получить номер 3. Кроме того, как я могу сделать мой #smoothinline_back{} или светло-серый квадрат меньше, чем более темный серый квадрат, как на первом изображении.

Что я пытаюсь получить:

Что у меня сейчас есть:

ТАК Как я могу сделать изображение 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>