How to align svg icon and text content in same line towards right side (Right aligned) in bootstrap

Issue

I have tried to align icon and text towards right side. But its not happening. am attaching the design herewith.

I tried code below - please let me know if there is any options available.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-1 icon1">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
    <circle cx="8" cy="8" r="8"/>
  </svg>

  <div class="p-2" id="numOfStatus">Completed</div>
</div>

Solution

You can use flexbox to move the element to right

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-12 icon1">
         <div class="d-flex justify-content-end align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="orange" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Not Started</div>
             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="red" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Progress</div>
             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Completed</div>
         </div>
      </div>
   </div>
</div>

Answered By - Alaksandar Jesus Gene