Не удается заставить SVG правильно перемещаться влево в карточках в проекте BootStrap

Question

В настоящее время я работаю над проектом для заявления о приеме на работу, в котором мне нужно заново создать веб-сайт stripe.com с помощью начальной загрузки. В настоящее время я борюсь за следующую часть сайта:

К сожалению, мои текущие работы таковы:

То, что я пытаюсь сделать, это заставить svgs плавать влево на каждой карточке так, чтобы элементы заголовка и абзаца отображались непосредственно справа, а не под ними.

До сих пор я пытался использовать CSS и классы boot-strap, чтобы SVG-элементы плавали безуспешно, и после 45 минут поиска в Google я решил спросить stckOflw. Вот мой текущий соответствующий код:

.card-section{
    background-color: #F6F9FC;
}

.card-section svg{
    height: 130px;
    width:130px;
    position: relative;
    top: 50%;
    left: -35px;
    /* float: left; */
}

.green-card h5{
    margin: 0 0 5px;
    font-size: 17px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: .025em;
    color: #24b47e;
}

.blue-card h5{
      margin: 0 0 5px;
    font-size: 17px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: .025em;
    color: #3297d3;
}

.card-section p{
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  color: #525f7f;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;  
}



.card-section .card{
    overflow:hidden;
    /* padding: 40px 40px 40px 120px; */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="card-section">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                   <div class="card green-card">
                        <svg viewBox="0 0 130 130" class="float-left">
                            <path class="hover-fillLight" fill="#76E5A2"
                                d="M65 10c30.376 0 55 24.624 55 55s-24.624 55-55 55-55-24.624-55-55 24.624-55 55-55z"></path>
                            <path fill="#FFF"
                                d="M102.274 27.78v-.002c-9.628-9.615-22.968-15.526-37.69-15.408-28.292.228-51.557 23.072-52.238 51.32-.22 9.175 1.915 17.832 5.84 25.416.1.192.317.29.526.24.003 0 .006 0 .01-.002a.462.462 0 0 0 .324-.616c-5.15-13.598-2.25-29.54 8.713-40.488 14.915-14.898 39.102-14.898 54.02 0L48.25 81.725c14.917 14.897 39.104 14.897 54.022 0 14.916-14.897 14.917-39.048.002-53.945z">
                            </path>
                            <path class="hover-fillDark" fill="#159570"
                                d="M88.198 58.794c3.435 12.802-4.173 25.96-16.992 29.39-12.82 3.43-25.997-4.166-29.43-16.968-3.436-12.802 4.17-25.96 16.99-29.39 12.82-3.43 25.997 4.166 29.43 16.968z">
                            </path>
            
                        </svg>
                        <h5 class="">Recuring Payments</h5>
                        <p class="">
                            Send Invoices, manage subscriptions and reduce payment declines with Stripe's recovery tools. Explore Stripe Billing.
                        </p>
                   </div>
                </div>
                <div class="col-md-6">
                    <div class="card blue-card">
                        <svg class="float-left" viewBox="0 0 130 130">
                            <path class="hover-fillLight" fill="#69D5F8"
                                d="M65 10c30.376 0 55 24.624 55 55s-24.624 55-55 55-55-24.624-55-55 24.624-55 55-55z"></path>
                            <path fill="#FFF"
                                d="M48 79.552V47.998H34.73c-.65 0-1.275.26-1.735.72L13.765 68.07a3.7 3.7 0 0 0-1.053 3.068c2.92 23.81 22.293 43.188 46.103 46.114a3.7 3.7 0 0 0 3.067-1.052L81.29 97.05c.46-.46.717-1.084.717-1.735L82 82l-31.545.005A2.454 2.454 0 0 1 48 79.552z">
                            </path>
                            <path class="hover-fillDark" fill="#217AB7"
                                d="M119.55 58.073L96.344 81.28c-.46.46-1.085.72-1.736.72H81.993V50.462a2.454 2.454 0 0 0-2.453-2.455H48l.002-12.613c0-.65.258-1.276.718-1.736L71.93 10.45c24.83 3.123 44.497 22.79 47.62 47.623z">
                            </path>
                        </svg>
                       
                            <h5>PAYMENTS FOR PLATFORMS</h5>
                            <p>
                                Stripe Connect gives platforms and marketplaces the tools to easily support multi-party payments and get sellers in
                                25 counties paid.
                            </p>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>

Одна вещь, которую я обнаружил, это то, что, когда я пытаюсь использовать float: left;на моем CSS для моих элементов SVG в моих картах, а затем я удаляю бутстрап, они работают. Однако для этого проекта требуется начальная загрузка.