How to make background-color only cover the size of element?

Question

I have a div which contains text inside of it. I want to add a background-color to the div, but I dont want the background-color to take up the entire row. Just the size of the div.

This is the current state:

div {
  background-color: blue;
}

<div>text is here<div>

this is the wanted state:

Thanks

Answer 1

Use width: fit-content and it will have the width of what is inside of the element.

.container {
  background-color: yellow;
  width: fit-content;
}

<div class="container"> random text </div>

Answer 2

Set the display to inline-block:

div {
    background-color: blue;
    display: inline-block;
}