bootstrap 4;浮动在其他文本行里面的fontawesome文本行

Question

我正在整理个人资料页面。我有一个人名的第一行。我下面有一排星级评分。 HERE's THE JSFIDDLE这是代码。

<div class="container-fluid">
  <div class="d-flex flex-row justify-content-around">
        <div class="d-flex flex-column flex-1 text-center mr-2">
          <img class="img-fluid profile-pic"
              src="{{ url_for('static', filename='img/user-images/') }}{{current_user.id}}/profile/{{profile_pic.filename}}"
              alt="Image Failed to Load">
        </div>
        <div class="d-flex flex-column flex-1 ml-2">
          <div class="d-flex flex-row">
            <div class="flex-column ">
              <div class="flex-row text-left profile-name">
                Ashley Eggerton
                <div>
                  <div class="flex-row" style="float: left">

                    <i class="fa fa-star" style="font-size: 5vw;" id="star-rating" aria-hidden="true"></i>
                    <i class="fa fa-star" style="font-size: 5vw;" id="star-rating" aria-hidden="true"></i>
                    <i class="fa fa-star" style="font-size: 5vw;" id="star-rating" aria-hidden="true"></i>
                  </div>
                </div>

我一直试图让星级评分行在个人资料名称行中浮动。基本上，我希望星星与名称齐平，并使用某些名称字体（如“y”和“g”）来覆盖星级。

我尝试了柱形容器以及绝对/相对位置和浮动的各种组合;没有成功。我所做的任何更改似乎都会导致最前面的一行“Book Your Event ...”与前两行重叠。

我们将非常感谢您对此特定问题的任何帮助，以及关于绝对/相对位置的教程的任何链接都将非常感激。