2 строки текста. 1-я строка может содержать до 2 строк. Нижняя часть ВСЕГДА должна быть на второй строке, обернута за линией 1. CSS только решение, пожалуйста

Question

У меня есть это HTML

<div class="link">
   <i class="icon" />
   <div class="text-wrapper">
       <span class="label">Some label which can span at most 2 lines</span>
       <span class="subtext">(optional)</span>
   </div>
</div>

Один способ отображения:

Обратите внимание, как метка переносится на вторую строку, когда за ней идет подтекст.

---

Другой способ отображения:

Обратите внимание, что метка здесь недостаточно длинна для переноса, но подтекст все еще находится во второй строке.

Кто-нибудь может подсказать, как мне добиться вышеупомянутого только с помощью HTML / CSS? Не стесняйтесь игнорировать значок в решении. У меня это уже есть. Заранее спасибо.

Код, который у меня есть ...

.link {
  position: relative;
  font-size: 0.875rem;
  padding-left: 26px;
  text-align: left;
  line-height: 1.25rem;
}
.icon {
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  border-radius: 50%;
  transform: translateY(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.label { 
  margin-right: 4px; 
  color: #007dbb; 
}
.subtext { color: #686868; }

Answer 1

Установите первый диапазон как display: block; (см. css для label -элемента). При этом первый интервал будет отображаться как блочный элемент, и второй интервал будет начинаться с новой строки.

.link {
  position: relative;
  font-size: 0.875rem;
  padding-left: 26px;
  text-align: left;
  line-height: 1.25rem;
}
.icon {
  padding: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  border-radius: 50%;
  transform: translateY(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.label { 
  display: block;
  margin-right: 4px; 
  color: #007dbb; 
}
.subtext { color: #686868; }

<div class="link">
    <i class="icon">Icon</i>
    <div class="text-wrapper">
        <span class="label">Some label which can span at most 2 lines</span>
        <span class="subtext">(optional)</span>
   </div>
 </div>

Answer 2

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

.link {
    display: flex;
    flex-direction: row;
}
.link i {
    margin-right: 10px;
}
.text-wrapper {
    display: flex;
    width: 175px;
}
.text-wrapper p {
    margin-top: 0;
}

.text-wrapper .subtitle {
    color: blue;
    font-style: italic;
}

<div class="link">
    <i class="icon">Icon</i>
    <div class="text-wrapper">
        <p class="title">Some label which can span at most 2 lines
          <span class="subtitle">(optional)</span>
        </p>
    </div>
 </div>