Bootstrap 5 Card question, float-right, d-flex with justify-context-end etc, not working-CodePudding

I've started learning Bootstrap 5 today and came up with a card that will be populated by a collection of products in my code. I've toyed with rows and cols and positioning and I think this is so far my best shot at it, spending 4 hours just to design this card which probably would have taken someone here 5 minutes to code, and trying to figure out why some BStrap classes are not working in combination with other, watched a couple of videos, but my only problem now is this pencil which should be position at the farthest right, which cannot be budge unless the H5 tag will come with it.

Actual result of Bootstrap Card

Index.html

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <title>Hello, world!</title>
</head>

<body>
    <div >
        <div >
            <div >
                <div  style="width: 350px; border:red 2px solid;">
                    <div >
                        <div >
                            <h5 >Pet Harness
                                <a  href=""><i ></i></a>    
                            </h5>
                            
                        </div>
                        <div >
                            <img  src="images/arya.jpg" style="width:150px; max-height:150px;"
                                alt="Card image cap" />

                        </div>

                        <div >
                            <div >
                                <div style="border: red 1px solid">
                                    Some text1
                                </div>
                                <div style="border: red 1px solid">
                                    Some text2
                                </div>
                                <div style="border: red 1px solid">
                                    Some text3
                                </div>
                                <div style="border: red 1px solid">
                                    Some text4
                                </div>
                                <div style="border: red 1px solid">
                                    Some text5
                                </div>
                            </div>
                        </div>

                        <div >
                            <p >Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <a href="#" >Add to cart (Price:$12.99)</a>
                            <a href="#" >Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

I have tried like below, and also "float-right" in the class, but that icon doesn't move, i've adde containers and rows/columns around this H5 tag, but everything in the card gets distorted because of that.

Any ideas what have I missed or if this structure I created is good enough to use in my UI? Just added the borders as visual guide to see where the bounderies are taking place.Thanks

<h5 >
   Pet Harness <a  href=""><i ></i></a></h5>

CodePudding user response：

The answer I found (finally!) is float-end, as float-right(or left) is deprecated in BS5.0

CSS float-right not working in Bootstrap 4 Navbar