Управление обрезкой текста CSS

Есть некая строка "шапка" с набором разных элементов. При уменьшении ширины родителя, эта шапка будет сжиматься. При этом по задумке, сначала должен сжаться Item 1, и только когда он сожмется до 1 символа, должен начать сжиматься Item 2. Button - это кнопка, но не input элемент, и он сжиматься не должен, соответственно использовать конструкцию c замноготочиванием на всем элементе block нельзя (или я не понимаю чего-то). При всем при этом Button и Item 1 имеют общего родителя, а Item 2 соседний к нему. Постарался максимально описать. Подозреваю что нужно как то задействовать flex-grow/flex-shrink и правила класса .ellipsis, но никак не могу сообразить каким образом. Возможно кто-то сможет помочь разобраться?

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Структура примерно такая.

<div class="header-line">
    <div class="other-block">Any items</div>
    <div class="block">
        <div class="block-left">
            <div class="block-left-1">Button(div)</div>
            <span class="block-left-2">Item 1(span)</span>
        </div>
        <span class="block-right">Item 2(span)</span>
    </div>
    <div class="other-block">Any items</div>
</div>