CSS - Left and Right DIV with 100% width
<p>I am currently using a <code>Bootstrap</code> for my website with a <code>left sideBar navigation</code>.</p>

<p>At the <code>main content</code>, i have 2 container for <code>left</code> and <code>right</code> content.</p>

<pre><code>What I want is like the image below and i already done this:
</code></pre>

<p><a href="https://i.stack.imgur.com/SNZAR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SNZAR.png" alt="enter image description here"></a></p>

<pre><code>and when the toggle button is clicked then the `rightDiv` will resize 
which is my main problem and i'm not able to do:
</code></pre>

<p><a href="https://i.stack.imgur.com/wV7B2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wV7B2.png" alt="enter image description here"></a></p>

<pre><code>and when the browser/device is small lets say mobile device then it be 
like this and i already done this.
</code></pre>

<p><a href="https://i.stack.imgur.com/vH9UW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vH9UW.png" alt="enter image description here"></a></p>

<p>I am able to do the first and third image but failed at the second image which will resize the <code>rightDiv</code> on toggle button clicked.</p>

<p>so far i have this in my HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
        &lt;!--Start of Sidebar navigation --&gt;
        &lt;div id="sidebar-wrapper"&gt;
            &lt;ul class="sidebar-nav"&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
                &lt;/li&gt;
                ....
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- End of Sidebar navigation--&gt;
        &lt;!-- Start Main Content --&gt;
        &lt;div id="page-content-wrapper"&gt;
            &lt;div class="container-fluid"&gt;
                &lt;div class="row"&gt;
                    &lt;!--START OF LEFT DIV--&gt;
                    &lt;div class="row-post-container"&gt;
                    &lt;/div&gt;
                    &lt;!--END OF LEFT DIV--&gt;
                &lt;/div&gt;
                &lt;!--START OF RIGHT DIV--&gt;
                &lt;div class="main-right-side-container"&gt;
                    &lt;div class="right-side-container"&gt;
                        ....
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!--END OF RIGHT DIV--&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- END Main Content --&gt;
    &lt;/div&gt;
</code></pre>

<p>and in my CSS i have this for left and right sidebar of DIV:</p>

<pre><code>.row-post-container{
    display: table-cell;
    float: left;
    max-width: 800px;
    width: 100%;
    min-width: 300px;
    margin-right: 20px;
}.main-right-side-container{
    display: table-cell;   
    min-width: 300px;
    width: 100%;
    max-width: 300px;
    vertical-align: top;
    height: 300px;
    float: left;
    padding: 0px;
    margin-top: 20px;
}
</code></pre>

<p>Anyone has an idea?</p>

<p>For more clarification please do ask me.</p>

<p>Please suggest only CSS.</p>

<p>Thak you very much.</p>

<p><strong>EDIT:</strong> the orange is leftDiv and dark green at the right side of orange is RightDiv.</p>