title: JQuery/Javascript for Div resizing, expand and collapse
body: <p>Any help will be appreciated.</p>
  
  <p>I have 3 divs, the parent div(red), 2 child divs at the top(blue) and another on the bottom(green). Here is what I want to achieve:</p>
  
  <p>When the top div(blue) resizes/increases its size by clicking the "Expand Blue Div" button, the bottom div(green) will shrink/decreases its size but remain in its position, meaning, it should still remain on its x-Axis even though it change its height. In short, regardless of the height of the bottom div(green), it should still remain on its position.</p>
  
  <p>I want it also to revert back all of their original sizes when click on "Shrink Blue Div" button. Both Green and blue sizes will be on their original sizes.</p>
  
  <p>I prefer a full jquery/javascript solution on this one. Thank you all</p>
  
  <p><strong><em>PLEASE NOTE</em></strong>
      The javascript code should NOT use  constant numbers for computation of size/height of "GREEN" div. For example, "greendiv.height = 100 - 5px"   &lt;&lt;, we should avoid using constants for this one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#expandDiv").click(function(){
   $("#blueDiv").css("height","150px");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent_container {
    border: 5px solid red;
    height: 400px;
  }
  .blue_box {
    height: 50px;
    border: 5px solid blue;
  }
  .green_table {
    overflow-y: auto;
    border: 5px solid green;
    position:relative;
    height:250px;
  }
  
  .btn_actions {
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent_container"&gt;
    &lt;div class="btn_actions"&gt;
      &lt;button class="btn" id="expandDiv"&gt;Expand Blue Div&lt;/button&gt;
      &lt;button class="btn" id="shrinkDiv"&gt;Shrink Blue Div&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="blue_box" id="blueDiv"&gt;
      
    &lt;/div&gt;
    &lt;div class="btn_actions"&gt;
      &lt;button class="btn"&gt;Download Data&lt;/button&gt;
      &lt;button class="btn"&gt;Sort Data&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="green_table"&gt;
        &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my JSFiddle: <a href="https://jsfiddle.net/koykoys/0zLpgzsn/1/" rel="nofollow noreferrer">https://jsfiddle.net/koykoys/0zLpgzsn/1/</a></p>
  
  <p><a href="https://i.stack.imgur.com/aAxjo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aAxjo.png" alt="Here is my mock up image."></a></p>