Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it.
If the content of the first span is long and causes it to wrap, the width of the span extends beyond the text content, leaving extra space. This alignment forces the second span to be positioned at the right edge of the parent div with the remaining width taken by the first span.
Is there a way to make the width of multi-line spans behave like single-line spans? I am okay with the browser choosing where to wrap the text.
I have provided an image illustrating what I'm trying to achieve. I want the second span to always be aligned with the right edge of the box that just fits the text. In the case of a multi-line first span, the width should accommodate the longest line after wrapping, as shown in the third example in the image. Currently, I can manually specify the width of multi-line spans after wrapping, but I don't want to rely on random text lengths for this purpose.
div{
border:solid 1px green;}<div style="width: 500px; height: 150px; display: flex">
<span id="span1">kljlkajdl aldf di alkd falk afldin laknd flaid flkna dlfin laind flina ldf</span>
<span id="span2">ABC</span>
</div>
<div style="width: 500px; height: 150px; ">
<span id="span3">kljlkajdl aldkjf di alkd falk afldin laknd flaid flkna dlfinu lainduyvgcrdrses flina ldfina ldsfialdknfa dfoin a</span>
<span id="span4">ABC</span>
</div>