CSS: Box should only have the width of the text without using

Question

Right now, I have an issue that I don't understand.

This is my code:

.item {
  margin-bottom: 20px;
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.title_container {
  padding: 10px;
}

.title {
  background-color: grey;
  color: white;
  padding: 10px;
  display: table;
}

<div class="item">
  <div class="title_container">
    <div class="title">
      Hello
    </div>
  </div>
</div>

<div class="item">
  <div class="title_container">
    <div class="title">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

<div class="item">
  <div class="title_container">
    <div class="title">
      Lorem ipsum dolor sit<br> amet
    </div>
  </div>
</div>

The result should like the third item. But it needs a <br> to have the width that is provided from the text width. Without a <br>, the grey box is wider than it's needed.

How can this be fixed?