html - 元のデザインが壊れないように、別の div 内に div を適切に追加する方法は?

Question

私はこの基本的なHTMLを持っています:

<div id="views-container">
    <div id="html-container"></div>
    <div id="original-page-container"></div>
    <div id="result-page-container"></div>
</div>

これは、これらの div の css です。

#views-container > div{
    height:90%;
    width:33%;
    display:inline-block;
}

#html-container{
    background-color: pink;
}

#original-page-container{
    background-color: yellow;
}

#result-page-container{
    background-color: gray;
}

これが最終出力です。

しかし、内部に2つのdivを追加したい

htmlコンテナ

、 このような：

<div id="views-container">
    <div id="html-container">
        <div id="html-content-area">
            <textarea id="OutputHTML"></textarea>
        </div>
        <div id="html-info-area">
            bla bla bla
        </div>
    </div>
</div>

これを行うと、これがページのレンダリング方法です。

html-content-area内のtextarea がhtml-container の すべての幅と高さを使用するようにします。後で、html-info-area に 何かを表示するためにhtml-content-areaを非表示にする必要があります。

これらの div を html-content-area 内に追加
して、元のデザインを壊さないようにするにはどうすればよいですか?

コードをフィドルに貼り付けました： http://fiddle.jshell.net/eyCbB/

前もって感謝します！