Having trouble with aligning the left text and custom styled button to the right and top of the checkout button, despite using various codes like float:right, margin-left, position relative/absolute. Shifting the button also didn't work, so now considering a vertical direction approach. Maybe something similar to "Total Coins =".
/* Checkout Success Modal*/
#checkoutModalBtn{
background-color: var(--pri-color);
color: white;
font-size: 1.5rem;
margin: 0 12rem 0 auto;
padding: 8px 14px;
margin-top:10rem;
}
#checkoutModalBtn1{
background:white;
font-size: 1.5rem;
margin: 0 12rem 0 auto;
padding: 8px 14px;
border: none;
outline: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
pointer-events: none;
float:right;
}
.coinsTotalRow{
float:right;
} <div class="modal-footer">
<div class="coinsTotalRow">
<p class="checkoutTotal">Total Coins: </p>
<p id="checkoutcoinsTotal" onkeypress="return (this.innerText.length <= 10)">
<p>
</div>
<button type="button" href="#checkoutModal" id="checkoutModalBtn1" data-toggle="modal" class="btn btn-primary"></button>
<button type="button" href="#checkoutModal" id="checkoutModalBtn" data-toggle="modal" class="btn btn-primary">CHECKOUT</button>
</div> "Checkout button"