Html CSS悬停时的两列布局增加宽度

我希望有一行有两列（都是流体），当我将一个元素悬停在其中一列时，它将通过水平滑动显示内容，这将使该列变宽，从而使另一列变宽。这在纯CSS中可能吗

[ Left column fluid (elementX)][Right column fluid]

在（elementX）的鼠标上方，我们将得到如下内容：

[ Left column fluid (elementXxxxxxx)][Right col...]

下面是一个可以更好地说明这一点的示例：

这在纯CSS中可行吗？如果是，如何进行

---

这里有一把小提琴：

您可以使用

显示：表格单元格或您可以使用
显示：flex也是如此，所以我将FlexWay作为它的最新版本，与
显示：表格单元格相比，它要宽松得多方法，这是旧的方式来实现如此


我在
上回答了一个类似的问题以供考虑，关于滑动，如果你能利用元素的边距或位置，通常看起来会更好。使用宽度会调整/重新包装内容。在这种情况下，也许可以和zindex一起玩，因为你们在谈论肩并肩columns@fnostro是的，确实如此，但OP还没有分享他的观点，所以如果他澄清，我将根据我的回答编辑我的答案。谢谢。例如，左列是否可以固定宽度，右列是否可以灵活。当我悬停Call时，它变成了宽度为AutoMax的一个最大值。你的答案恰到好处。我添加了一张图片来更好地说明我的期待。再次感谢。
.wrap {
    display: flex;
}

.wrap .col {
    min-height: 100px;
    background: #eee;
    width: 50%;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div.wrap > div:nth-of-type(1) {
    background: #aaa;
}

div.wrap > div:hover {
    width: 70%;    
}