如何以最简洁的方式完成此布局？

Question

说明：单击元素A时，布局会扩展（但不一定是动画）为更复杂的布局。容器（以绿色显示）的宽度为100％，而元素B和G（以蓝色显示）的宽度为柔性。所有以红色显示的元素都具有固定的宽度。

第一个状态很容易实现，但我不确定如何最好地接近两条线之间的定位元素E.

我一直在这里尝试：http://cdpn.io/LKJnm

编辑：Flexbox是我的选择，也是我到目前为止所尝试的。