Bootstrap "close" Class: Button Sometimes Pushed out of Alert by Text - html

Question

I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within.
Most of the time, it appears fine like so:
But at certain screen widths, just before the text in the alert wraps, the close button no longer has enough room at the end of the alert. In this image, I reduced the screen width by a few pixels compared to the previous image:
Here is my code snippet (edited to replace ASP.NET controls and code render blocks):
<div class="mt-0 mb-3 alert alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>

Answer 1

Good observation
The green div with display:inline-block; & width to 100% should resolve this...
working snippet below:
.fixedAlert {
display: inline-block;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="mt-0 mb-3 alert alert-success fixedAlert">
<span class="text-here"> FIXED ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
<div class="mt-0 mb-3 alert alert-primary ">
<span class="text-here"> ORIGINAL ALERT... I'm wondering if there are any edits I can make on top of bootstrap's css to resolve the following behaviour where my close class button sometimes gets pushed out of its alert by the text within</span>
<button type="button" class="close">
<span>×</span>
</button>
</div>
</div>
Updated: in light of questioner's comment below

Answer 2

It turns out I'd simply removed one class too many while removing client-side dismiss functionality in favour of an ASP.NET click event postback.
The class in question, alert-dismissible, which is supposed to go alongside the alert class when a close button is present. It adds a larger amount of padding to the right side of the alert div, such that the floating close button/anchor always has enough room to sit at the top right. It also gives the close button some styling, including padding, such that it is nicely centered in that vertical space.
That also explains why my close button was at the bottom right instead. A comment on the main question that got deleted by its OP did point out that the close button looked like it was in a weird position.
Here is my new working code, without any additional custom classes needed:
<div class="mt-0 mb-3 alert alert-dismissable alert-primary">
<span class="text-here">foo</span>
<a class="close">
<span>×</span>
</a>
</div>