How to get rid of space kept by text with line break?

Question

I've got two elements (let's say an image and a text) in a <div> that I center using flexbox.

The problem is that the text takes extra space when a line break occur because of a long word.

.container {
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
}

.image {
  color: white;
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 5px;
}

p {
  background: yellow;
  margin: 0;
}

<div class="container">
  <div class="image">IMG</div>
  <p>Word word word</p>
</div>

<br/>

<div class="container">
  <div class="image">IMG</div>
  <p>Word word word verylongword</p>
</div>

<br/>

<div class="container">
  <div class="image">IMG</div>
  <div>
    <p style="display:inline">Word word word verylongword</p>
  </div>
</div>

JS Fiddle demo

In the first case, there is no line break and elements are well positioned. In the second case a long word create a line break and the <p> keep the remaining space.

That's what I expected:

I tried to enclose the text in another <div> and make it display: inline; (third case) but the space is still present.

Any idea ?