Float Right break on overflow - html

Question

How do you make floated elements stop floating on overflow? I'm trying to have something like this:
When the browser is fully maximized the two elements are meant to line up like this:
|span| |span|
But when the browser re-sized to the point where the elements are touching this should happen:
|span|
|span|
I've tried doing it with floating like:
<div class="border px-3">
<span>December 6th, 2020</span>
<span class="float-right">This is some example text right here</span>
</div>
But when I resize I get
|span|
|span|

Answer 1

This is what you want, but using flex rules. And exactly:
display: flex - sets flexibility;
justify-content: space-between - distributes blocks evenly throughout the free space;
flex-wrap: wrap - sets the transfer of blocks when narrowing the browser window.
.border {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
<div class="border px-3">
<span>December 6th, 2020</span>
<span>This is some example text right here</span>
</div>

Answer 2

You can use some flexbox properties,
.my-container{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.first{
flex: 1 0 auto;
}
.second{
flex: 0 0 auto;
}
Corresponding HTML Code
<div class="my-container">
<span class="first">December 6th, 2020</span>
<span class="second">There is some example text here</span>
</div>