如何让.left div优先于.right div动态分配宽度？CSS Grid可行吗？

我有一个可根据设置切换两种样式的页面：

样式1 #

CSS代码：

div > div {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.left {
  background-color: lightgreen;
  float: left;
}

.right {
  background-color: red;
  float: right;
}

.end {
  background-color: lightblue;
  float: left;
}

.left,
.right,
.end {
  width: 50%;
}

HTML代码：

<div>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
  <div class="end">END</div>
</div>

样式2 #

CSS代码：

div > div {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.left {
  background-color: lightgreen;
  float: left;
}

.right {
  background-color: red;
  float: right;
}

.end {
  background-color: lightblue;
  float: left;
}

.left,
.right {
  width: 50%;
}

.end {
  width: 100%;
}

HTML代码：

<div>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
  <div class="end">END</div>
</div>

当前方案灵活性不足，我希望.left和.right采用动态宽度而非固定值：

.left,
.right {
  min-width: 40%;
  max-width: 60%;
}

同时需要遵循以下规则：

• .left宽度至少为40%
• 若.left内容宽度超过40%，可扩展至最多60%
• .right宽度至少为40%
• 若.right内容宽度超过40%，可占用剩余可用空间（若.left已占60%则无法扩展）

最终每个div的高度需根据内容动态调整。

使用CSS float似乎无法实现该需求（div无法感知彼此宽度），请问能否通过CSS Grid实现？

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