Estou com o seguinte problema no CSS..  mandei um exemplo para vocês do que estou tentando fazer [Exemplo do Código, clique aqui][1] 

Gostaria que a  `<div id="divAreaMenuLateral">` que esta em laranja que esta na vertical fique dentro da `<div id="divAreaConteudo">` que esta em vermelho
é possível fazer isso ??  Eu não quero centralizar quero que fique do mesmo height `<div id="divAreaMenuLateral">`   dentro da `<div id="divAreaConteudo">` ou seja se aumento o **height** da `<div id="divAreaConteudo">` a `<div id="divAreaMenuLateral">` se ajusta automaticamente.

**Código HTML**

    <html>
    <header>
       <title>ERP</title>
    </header>
    <body>
    <div id="divAreaSite">
       <!--span id="AreaSite"> Area Site</span-->
       <div id="divAreaConteudo">
          <!--span id="AreaConteudo"> Area Conteudo</span-->
    
          <div id="divAreaTitulo">
             <span id="AreaTitulo"> Area Titulos</span>
          </div>
          <div id="divAreaMenu">
             <span id="AreaMenu"> Area Menu</span>
          </div>
          <div id="divAreaMenuLateral">
             <!--span id="AreaMenuLateral"> Area Menu Lateral</span-->
          </div>
    
          <div id="divAreaDados">
              <!--span id="AreaDados"> Area Dados</span>
    
              <!--div id="divVendas">
                  <span id="AreaVendas"> Vendas</span>
              </div>
    
              <div id="divVendasDados">
                  <span id="VendasDados"> Vendas Dados</span>
              </div-->
          </div>
       </div>
    </div>
    </body>
    </html>

**Código CSS**


    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #divAreaSite {
        background-color: #1f3ff0;
        width: 100%;
        height: 100%;
    }
    
    #divAreaConteudo {
        background-color: #f03a45;
        margin-left: 3%;
        margin-right: 3%;
        width: 90%;
        height: 60%;
    }
    
    #divAreaTitulo {
        background-color: #76f0cb;
        width: 100%;
    }
    
    #divAreaMenu {
        background-color: #2ff062;
        width: 100%;
    }
    
    #divAreaMenuLateral {
        background-color: #f0a75c;
        height: 100%;
        width: 20px;
       // float: left;
    }


Agradeço a colaboração

Obrigado !!!!

  [1]: https://jsfiddle.net/GuMaximus/9rjac8n9/