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

说明：单击元素A时，布局会展开，但不一定会动画化为更复杂的布局。绿色显示的容器具有100%的宽度，而蓝色显示的元素B和G具有灵活的宽度。红色显示的所有元素都具有固定的宽度

第一种状态非常简单，但我不确定如何最好地接近两条线之间的定位元素E

我一直在这里尝试：

---

编辑：Flexbox是我的一个选项，也是我迄今为止一直在尝试的。

在单击之前，这些元素隐藏在哪里？可能只是在显示中：无-土地问题不在于如何从折叠到扩展，而在于如何实现扩展布局。因此，您应该从三列和flexbox的角度来考虑。坦白地说，flexbo现在的支持非常肤浅，你正在为自己做大量的工作。我只使用它在移动设备上工作，并且已经在我需要的设备上测试了flexbox，所以这不是问题。