title: Fix two divs to the bottom and top of another div
body: <p>I'm looking to fix two divs to the bottom and top of another div.</p>
  
  <p><a href="https://jsfiddle.net/NathaliaZeed/hm9c6ta6/2/" rel="nofollow noreferrer"><strong>Fiddle</strong></a></p>
  
  <pre><code>&lt;div id="subG"&gt;
      &lt;div id="subUp"&gt; TTTTT &lt;/div&gt; //This to be fixed on top of this parent div
      &lt;div id="subGH"&gt; 
          &lt;img src=""&gt;
      &lt;/div&gt;
      &lt;div id="subDwn"&gt; BBBB &lt;/div&gt; //This to be fixed at the bottom of this parent div
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#subG{
      height: 100px;
      overflow: hidden;
      overflow-x: hidden;
      position: relative;
  }
  #subGH{
      height: 99%;
      position: absolute;
      overflow: auto;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: -15px;
  }
  #subUp #subDwn{
      position: relative;
  }
  </code></pre>
  
  <p>So the final would be something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/5vXcj.png" alt="enter image description here"></p>