Bootstrap 4 border overlapping button element - css

Question

I have the following HTML
<h2 class="border-center-right mt-4">
<span class="bg-white float-left">CREDITCARDNAME</span>
<button type="button" class="btn btn-primary float-right">APPLY NOW</button>
</h2>
I'm using Bootstrap 4. The border is currently overlapping the "Apply Now" button. How can I make it so the border sits behind the button?
THANKS!
I added the code to the following Fiddle: https://jsfiddle.net/katzumi/98c5q2cf/
And these are the border styles currently applied to <h2 class="border-center-right mt-4">:

Answer 1

You should be able to just remove float-left from your span.
I made the border red so it was easier to see against a white background.
<div class="container mb-5">
<h2 class="border-center-right mt-4" style="border-bottom: 1px solid red;">
<span class="d-inline-block bg-white">CREDITCARDNAME</span>
<button type="button" class="d-inline-block btn btn-primary float-right">APPLY NOW</button>
</h2>
<div class="text-4-col">
</div>
</div>
https://jsfiddle.net/98c5q2cf/2/

Answer 2

Fixed! I reduced the width of the element &::after the border-center-right class.
#include media-breakpoint-up(sm) {
.border-center-right {
position: relative;
overflow: hidden;
&::after {
content: "";
display: inline-block;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
**width: 50%;**
background: $accent-secondary;
margin-left: 1rem;
}
}
}