I am currently working with this HTML code in Vue.js:
<div class="confirm-button">
<button v-on:click="placeOrder" v-bind:disabled="!buttonEnabled">
<h1>Order</h1>
<i class="far fa-spinner fa-spin" v-show="!placeOrderLoading"></i>
</button>
</div>
Here is the CSS file related to the above HTML snippet. The 'fa-spin' icon appears based on the "v-show" property. However, when the 'fa-spin' appears, the 'h1 - Order' text shifts left in order to stay centered with the 'fa-spin'. My intention is to keep the position of the 'h1 - Order' text fixed at the center while only positioning the 'fa-spin' icon to the right without affecting the 'h1-order' text. Can you provide some suggestions or advice on how to achieve this? Thank you for taking the time to read through my query.
.confirm-button button {
box-sizing: border-box;
width: 100%;
height: 80px;
}
.confirm-button h1 {
display: inline;
font-size: 18px;
}
.confirm-button .fa-spin {
}