How to give more spaces between icon and text?

Question

I am having trouble using Bootstrap with CSS and am still learning Bootstrap documentation by using Flex. I can't give more spaces for them because the text keeps following the icon when I give margin. I need a solution to make the result just like what I wanted. I use Bootstrap 4.

My Result:

The result I wanted:

Here's the code with Bootstrap and CSS from First Image (My Result)

div.order-1,div.order-2,div.order-3 {
  color: #3379EA;
  margin: auto;
  margin-top:30px;
}

div.order-1 {
  border-right: 3px solid #3379EA;

}

div.order-3 {
  border-left: 3px solid #3379EA;
}

i.fas {
  color: #3379EA;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="d-flex flex-nowrap justify-content-end" style="margin-top:30px;margin:auto;"><!-- I put margin again to make them center-->
  <div class="order-1 p-2 justify-content-end text-center font-weight-bold">Smart<br>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="order-2 p-2 justify-content-end text-center font-weight-bold" >Wise<br>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="order-3 p-2 justify-content-end text-center font-weight-bold">Accountable<br>
    <i class="fas fa-users fa-2x"></i></div>
</div>
                 </div>
               </div>
            </div>

Thank you for helping.

Answer 1

Main thing is to use flex-fill and wrap your text into an element (I used a span) so you can style the border on it.

Note: Its good practice to not use <br/> for markup. see Is it sometimes bad to use <BR />?

.menu {
  margin: 30px;
}

.menu .item {
    color: #3379EA;
    margin: auto;
    margin-top: 30px;
}

.menu .item span {
  color: #515151;
  display: block;
  height: 50px;
  line-height: 50px;
  border-right: 3px solid #3379EA;
}

.menu .item:last-child span {
  border-right: 0;
}

.menu i.fas {
    margin-top: 16px;
    color: #3379EA;
    display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="menu d-flex flex-nowrap">
  <div class="item order-1 justify-content-end text-center font-weight-bold flex-fill">
    <span>Smart</span>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="item order-2 justify-content-end text-center font-weight-bold flex-fill">
    <span>Wise</span>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="item order-3 justify-content-end text-center font-weight-bold flex-fill">
    <span>Accountable</span>
    <i class="fas fa-users fa-2x"></i></div>
</div>