Распределение пространства двух динамических строк с помощью CSS ⇐ CSS

[Anonymous]

Новичок во фронтенде - получил эту задачу с двумя динамическими строками, одна идет рядом с другой по горизонтали в контейнере с фиксированной шириной, одна строка выровнена влево, другая - вправо.
Такое ощущение, что есть простое решение, которое я упускаю.
Правила распределения пространства между ними следующие:

• Обе строки занимают столько места, сколько им нужно, если их общая ширина не превышает ширину контейнера.
• Если обе строки длиннее половины контейнера, они должны занимать 50 % и быть обрезаны многоточием.
• Если одна строка короче 50%, а другая длиннее, более короткая строка должна занимать столько места, сколько ей необходимо, а более длинная строка должна занимать оставшееся доступное пространство ( но будет обрезан многоточием, если оно превышает это пространство).

Итак, все это распадается на 4 случая: два коротких, два длинных, левый короче, правый короче. (вероятно, еще два, если один из них длиннее половины контейнера, но вместе они не длиннее контейнера, поэтому ни один из них не обрезается)
Пока мне удалось заставить их вести себя как на этом изображении


Однако я не могу с этим справиться во втором и третьем случаях более короткая строка обрезается, хотя этого не должно быть.
Вот классы для левой и правой строк:

Код: Выделить всё

.container {
display: flex;
width: 600px;
gap: 10px;
max-width: 100%;
margin-bottom: 10px; /* Add margin between each case */
}

.text {
white-space: nowrap; /* Prevent text from wrapping */
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
padding: 5px;
min-width: 0; /* Allow shrinking */
border: 1px solid #ccc;
border-radius: 5px;
}

/* Left text */
.left {
flex-shrink: 1; /* Allow the left text to shrink if necessary */
max-width: 100%; /* Allow it to take up as much space as it needs */
margin-right: auto;
background-color: red;
}

/* Right text */
.right {
flex-shrink: 1; /* Allow the right text to shrink if necessary */
margin-left: auto; /* Push the right text to the right */
max-width: 100%; /* Allow it to take up as much space as it needs */
background-color: green;
}

А дело выглядит так:

Код: Выделить всё

Short text on the left side
This is a very long text that will take up the remaining space and will be truncated if it overflows.

Вот полный код, который мне нужен для этого: https://jsfiddle.net/k6jfpyrh
Любая помощь приветствуется

Подробнее здесь: https://stackoverflow.com/questions/791 ... n-with-css