So i've read multiple times that putting display:inline-block; in your span will fix it. But i just can't get it to work for me. Probably i just missed something, but i would like help on this.

```
<html>
    <head>
        <style>
            @font-face {
                font-family:myRobotoRegular;
                src:url(fonts/Roboto-Regular.ttf);
            }
            @font-face {
                font-family:myRobotoBold;
                src:url(fonts/Roboto-Bold.ttf);
            }
            @font-face {
                font-family:myRobotoLight;
                src:url(fonts/Roboto-Light.ttf);
            }
            body {
                background-color:black;
                color:white;
            }
            h1 {
                font-family:myRobotoBold;
                text-align:center;
            }
            .right {
                float:right;
                width:49%;
            }
            .individual {
                height:100%;
                margin:0 auto;
                overflow-y:scroll;
                padding-right:10px;
                text-align:left;
                width:440px;
            }
            .bannerGreen {
                background-color:#0D731D;
                padding:10px;
            }
            .bannerTitle {
                font-family:myRobotoBold;
            }
            .bannerRarity {
                font-family:myRobotoLight;
            }
            .description {
                background-color:black;
                font-family:myRobotoRegular;
                padding:20px 10px 10px 10px;
            }
            .quotes {
                color:#C0B9A7;
            }
            .orangeStat {
                color:#F26A1C;
                display:inline-block;
                font-family:myRobotoBold;
                font-size:20px;
            }
            .yellowStat {
                color:#FFD30B;
                display:inline-block;
                font-family:myRobotoBold;
                font-size:20px;
            }
            .imgDiv {
                float:right;
                margin-top:-10px;
            }
            .img {
                height:58px;
            }
        </style>
    </head>
    <body>
        <div class="mainDiv">
            <div class="right">
                <div class="individual">
                    <h1>
                        CATEGORY
                    </h1>
                    <div class="bannerGreen">
                        <div class="imgDiv">
                            <img class="img" src="">
                        </div>
                        <span class="bannerTitle">
                            TITLE
                        </span>
                        <br>
                        <span class="bannerRarity">
                            SUBTITLE
                        </span>
                    </div>
                    <div class="description">
                        DESCRIPTION
                        <span class="yellowStat">
                            STATISTICS
                        </span>
                        DESCRIPTION
                        <span class="orangeStat">
                            A STATISTIC
                        </span>.
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </body>
</html>

```

The "A" in "A STATISTIC" should well be able to be on the first line, but instead it follows the entire span to the second line.

(Bonus points if you recognize this. ;) )

EDIT: Inline instead of inline-block surely fixes the problem, but then the period after the .orangeStat span jumps away from the span. And i'd like it to not jump away but i do not want it to be included in the span either. Is there a way to get that?