CSS: два текста рядом, один подходит для содержимого, другой сжимается и переполняется до минимальной ширины, затем переносится

Question

У меня есть заголовок и url один за другим, и я хочу, чтобы они были рядом, пока они не поместятся на ширине контейнера. Когда они не могут поместиться рядом, я хочу, чтобы url сжимался и перетекал до тех пор, пока не достигнет минимальной ширины, тогда он может обернуться.

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

Я пытался добиться этого с помощью flexbox, который должен был иметь flex-wrap: wrap, чтобы сделать последующие элементы текущими, но URL-адрес либо уменьшился, и элемент date появился в первой строке (flex-basis: 0), либо разверните слишком сильно, пока он не будет перенесен на следующую строку (flex-basis: some%). Я пытался использовать float и clear, но не смог заставить его работать.

• Вот что я пытаюсь достичь:

желаемый результат

• Вот что я получаю с flexbox:

url не расширяется

• Вот что я хочу, когда доступное пространство меньше минимальной ширины URL:

url перенос на следующую строку

Вот соответствующий HTML-код:

<div class="section" data-section="header">
    <h5 class="section-title" style="display: none;">Section title</h5>

    <div class="field" data-field="title">
        <span class="field-label" style="display: none;">Field label</span>
        <span class="field-value">
            Some variable length, possibly quite long text here
        </span>
    </div>
    <div class="field" data-field="link">
        <span class="field-label" style="display: none;">Link</span>
        <span class="field-value">
            <a href="https://www.example.com/some-path/a-variable-length-and-possibly-quite-long-url-here.html">
                https://www.example.com/some-path/a-variable-length-and-possibly-quite-long-url-here.html
            </a>
        </span>
    </div>

    <div class="field" data-field="date">
        <span class="field-label">Date</span>
        <span class="field-value">2018-05-03 00:00:00</span>
    </div>
    [...]
</div>

И текущий CSS:

.section[data-section=header] .field {
    display: inline;
}
.section[data-section=header] .field[data-field=title] {
    font-weight: 700;
    font-size: 1.2em;
    line-height: 0.8;
}
.section[data-section=header] .field[data-field=link] {
    font-weight: 600;
    font-size: 0.7em;
    white-space: nowrap;
    max-width: 100%;
    position: relative;
}
.section[data-section=header] .field[data-field=link] .field-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - .8em);
    display: inline-block;
    vertical-align: -.1em;
}
.section[data-section=header] .field[data-field=link]::before {
    content: "[";
    font-size: 1.2em;
}
.section[data-section=header] .field[data-field=link]::after {
    content: "]\000A";
    white-space: pre;
    font-size: 1.2em;
}
.section[data-section=header] .field[data-field=status]::after {
    content: "\000A";
    white-space: pre;
}
.section[data-section=header] .field[data-field=title]::after {
    content: " ";
    line-height: 0px;
    font-size: 2.8em;
}

Можно ли как-то добиться этого, не прибегая к редактированию HTML-макета или не выделяя заголовок и url в их собственный контейнер?