2 lines of text. 1st line can have max 2 lines. Bottom needs to ALWAYS be on second line, wrapped behind line 1. CSS only solution please

Question

I have this 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>

One way of displaying is:

Notice how the label wraps to the second line while the subtext is trailing behind it.

---

The other way of display is:

Notice how the label here is not long enough to wrap, but the subtext is still on the second line.

Can anyone suggest how I can achieve the above with HTML/CSS only? Feel free to ignore the icon in the solution. I have that already. Thanks in advance.

The code I have so far...

.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

Set the first span as display: block; (see css for label-element). That will display the first span as a block element, forcing the second span to begin on a new line.

.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>