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

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>

Answer 2

Instead of having two separate span for title and subtitle. You can have one parent for title and add subtitle span inside it.
.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>