点击垂直图标栏图标展开水平图标栏，应采用何种布局方案？

我希望实现点击垂直图标栏中的图标时，展开对应的水平图标栏。例如，点击垂直图标栏里倒数第3个（红框标注）的图标，会在该图标同一行显示对应的水平图标栏（红框标注）。请问应使用哪种布局方案（如grid）来实现这一效果？

感谢！

编辑更新 #

我更新了Damian Chudobiński的答案，使其引用实际图标，并遵循SebastianK的建议使用transform: translateX(-100%)。在更新后的代码中，垂直图标栏位于右侧，水平图标栏从右侧向左展开。这解决了我的问题，感谢大家的帮助！

内容的提问来源于stack exchange，提问作者Avner Moshkovitz