This is a reusable code snippet you can add anywhere, where you want to show a badge. You can customize everything here to your needs.
So if you want to have the content in the same font-size, just remove the 'span'-element. If text is overflowing, use the 'br'-tag in between words as line breaks.
Minimize the font-size or increasing the height & width of the badge is also an option.
This long text is also to demonstrate the positioning. You can change the width of the text by altering the 'w-xx' class. 'w-75' means the div takes up 75% of the page. You can change it to 'w-50' for 50%, or 'w-25' for 25% width. Or remove it all together. But you must keep the 'd-flex'-class in the outer div to have content and badge next to each other.
This is a small badge. Works exactly in the same way as the big badge. It is not recommended to use a smaller font-size than the one displayed here. Both badge sizes can also have a different background-color of course. Just pass the HEX color number of your choice in the 'background-color'-property.