title: CSS resize element on click
body: <p>Please have a look at the page to start with: <a href="http://codepen.io/Mickael/pen/ztqnp?editors=110" rel="nofollow">http://codepen.io/Mickael/pen/ztqnp?editors=110</a></p>
  
  <p>What I'm trying to do is when one clicks on the little icon in the upper right hand corner, the parent container resizes it by increasing its width to 100% (currently set to a <code>px</code> value as there is another element on the right of it (the task list)).</p>
  
  <p>I would like to do the following:</p>
  
  <ol>
  <li><p>on click of the icon, use transition to expand the width to 100%</p></li>
  <li><p>once expanded, I want the container to be covering the task list completely (I can work that one out with z-index and position)<br></p></li>
  <li><p>once the box is expanded to 100%, I would like the arrow in the icon at the top to change to the left pointing arrows (that's the second svg that's commented out in the html)</p></li>
  </ol>
  
  <p>Any help is greatly appreciated... Ive googled transition, resizing, dynamic width and all sorts but can't find anything that would point me in the right direction of what Im trying to do here.</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>div#middle-container {
      margin: 0;
      padding: 0;
      width: calc(100% - 355px);            &lt;--------- resize this to 100%
      max-height: calc(100% - 105px);
      margin-left: 65px;
      height: 100%;
      position: fixed;
      z-index: 0 !important;
      top: 55px;
      border-radius: 10px;
      box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
      inset 0 1px 1px rgba(255,255,255,1); /*top internal highlight*/ 
      background-color: #777;
  }
  </code></pre>