How to align these badges side by side?-CodePudding

I'm trying to align these badges side by side but am having trouble doing so. inline-block doesn't seem to work and it's always stacked on top of eachother instead of side by side

How do I align it like the picture below?

this is what I'm trying to have it look like:

.tgr_card span {
    display: block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>

        <div  style="width: 30rem;">
            <div >
                <h5 >
                    Name
                    <div >
                        <button type="button"  aria-label="Close"></button>
                    </div>
                </h5>
                <h6 >#x</h6>

                <br>

                <ul >
                    <li >
                        Name
                        <span >test</span>
                    </li>
                    <li >
                        Min Max
                        <div >
                            <div >
                                <span >1</span>
                            </div>
                            <div >
                                <span >None</span>
                            </div>
                        </div>
                        <!-- <div>
                            <span >1</span>
                            <span >None</span>
                        </div> -->
                        <!-- <span >1 | None</span> -->
                    </li>
                    <li >
                        Name
                        <span >test</span>
                    </li>
                </ul>
            </div>
            <div >
                <a href="#"  style="width: 100%;">footer</a>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

using bootstrap v5.3.0 alpha-1

edit: it's side by side in the snippet but what I mean is that it's side by side and the same size as the full width badge above/below (see attached picture) - so both badges are like 50% width and uniform with the above/below badges

CodePudding user response：

.tgr_card span {
    display: block;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.half{
    width: 150px;
}
.half span{
width: 49%;
}

<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>

        <div  style="width: 30rem;">
            <div >
                <h5 >
                    Name
                    <div >
                        <button type="button"  aria-label="Close"></button>
                    </div>
                </h5>
                <h6 >#x</h6>

                <br>

                <ul >
                    <li >
                        Name
                        <span >test</span>
                    </li>
                    <li >
                        Min Max  
                     <div >
                      <span >1</span>
                      <span >None</span>
                        </div>
                        <!-- <div>
                            <span >1</span>
                            <span >None</span>
                        </div> -->
                        <!-- <span >1 | None</span> -->
                    </li>
                    <li >
                        Name
                        <span >test</span>
                    </li>
                </ul>
            </div>
            <div >
                <a href="#"  style="width: 100%;">footer</a>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>