Bootstrap 4 using sticky and float on divs

Question

I am using Bootstrap 4 with float-left and float-right classes that keep my 2 divs left and right of each other and works great, but I want the right div to be sticky as well, but this doesnt seem to work. I am using position-sticky on the div using float-right

Float class Reference here: Float URL

Sticky class Reference: Position URL

Essentially my HTML looks like this:

<section class="section">
<div class="float-left col-md-8">
    <div class="row sameheight-container">
        <div class="col-md-12">
           @*Form fields, such as input, select etc.*@
        </div>
    </div>
</div>
<div class="float-right col-md-4 position-sticky">
    <div class="row sameheight-container">
        <div class="col-md-12">
            <div class="card card-block sameheight-item">
                <table>
                    <thead>
                        <tr>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>3</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>10</td>
                            <td>50</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Please note that the first Div has a bunch of form controls, so I have removed that and just put a comment in there.

Is there a way of doing this?

Thanks for any help!