求助：纯CSS实现点击气泡扩展至首列的自适应布局方案

我需要一个无需JavaScript、仅用CSS实现的解决方案。气泡位于网格布局的第二列，点击时希望它能自适应屏幕宽度，扩展覆盖到第一列。

现有CSS代码 #

容器样式 #

.container{
  display: grid;
  grid-template-columns: 75% 25%;
}

列容器样式 #

:is(column1,column2){
  position: relative;
}

气泡默认样式 #

.bubble{
  position: absolute;
  left: 5rem;
}

当前尝试的点击展开样式 #

.bubble--editing {
  transform: translate(-43vw);
  width: calc(100vw - 80rem);
}

气泡收起状态示意图：

恳请各位提供帮助，谢谢！

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