space between 2 words CSS - css

Question

I would like to do a space between 2 words in css for example:
1 RUNNING DAYS ADMIN#SUPER.BIZ
In HTML there is &nbsp but it's not correct to use &nbsp I think?
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS <i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ</div>
</div>
How to do that in CSS ?
.sous-titre-bandeau-blanc{
font-family: 'Open Sans', sans-serif;
font-size: 13.3333px;
color: #474747;
padding-top: 14px;
padding-left: 28px;
padding-bottom: 15px;
}
Thank you

Answer 1

You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.
Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.
For example:
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<span>
<i class="far fa-calendar" />
<p>1 RUNNING DAYS</p>
</span>
<span>
<i class="far fa-envelope" />
<p>ADMIN#SUPERBTC.BIZ</p>
</span>
</div>
</div>
<style>
.sous-titre-bandeau-blanc {
display: flex;
justify-content: space-between;
width: 450px;
}
</style>

Answer 2

I would do something like this, if I'm understanding you correctly
<style>
.space-between {
display: inline-block;
padding-left: 3em;
}
.space-between:first-child {
padding-left: 0;
}
</style>
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
<div class="space-between"><i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ<div>
</div>
</div>

Answer 3

Since you already have a .fa icon in the right part of your div just add it some left margin:
.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }
Also, change your far for fa class to correctly display font-awesome icons