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

Issue

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

Solution

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>

Answered By - manjiro sano