Align element to the right of multiline text without a margin

Question

This is a little hard to explain. I have an inline-block element, that has multiple lines. As soon as it breaks, there is some white-space on the right which still pushes another element far right.

What I want to achieve is, that the next element is next to the inline-block like in this image.

This is my current solution, which does not provide the expected outcome:

div {
  background: #ccc;
  display: flex;
  align-items: center;
  max-width: 300px;
  margin-bottom: 10px;
}

span {
  display: inline-block;
  background: lightgreen;
}

<!-- this one has not the expected outcome -->
<div>
  <span>Someone has a very loooong wooooooooooord.</span>
  <em>&gt;</em>
</div>

<!-- this one on the other hand does -->
<div>
  <span>This one works fine.</span>
  <em>&gt;</em>
</div>