CSS order elements right to left - html

Question

I'm trying to have the text inside the "header rectangle"(darker purple) and place the heart image on the right side of the text like this
BUT I'm getting this result
with this html code
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
or this one
with this html code:
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar">
<img src="assets/images/avatar.svg">
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>
my css code is:
.book-header{
background-image: linear-gradient(269.78deg, #632095 0%, #4AC3E8 100%);
box-shadow: 0px 7.52083px 7.52083px rgba(0, 0, 0, 0.25);
height: 64px;
z-index: 300;
.avatar{
img {
width: 45px;
height: 45px;
margin-right: 20%;
margin-top: 1.5%;
}
.name {
margin-right: 32%;
color: #ffffff;
text-align: right;
padding: 0.2em 2em;
box-sizing: border-box;
font-weight: 600 !important;
font-size: 18px;
}
.message {
margin-right: 32%;
padding: 2em;
color: #ffffff;
text-align: right;
box-sizing: border-box;
font-weight: normal !important;
font-size: 15px;
}
}

Answer 1

Create a wrapper on both of the span and use flex on the header-wrapper container. I've simulated the image with the emoticon. You can use image also.
Flexbox
You just need to add the below classes in the header-wrapper if you are using bootstrap and remove the css.
d-lg-flex flex-row-reverse justify-content-between align-items-center
.header-wrapper{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
<div class="row book-header">
<div class="col-lg-4 text-right d-none d-lg-block avatar header-wrapper">
<div class="image">☺</div>
<div>
<span class="name" >Hi Helana</span><br>
<span class="message">How are you today?</span>
</div>
</div>
</div>