CSS flex-wrap: wrap taking all the space

Question

I have the following widget, with some short info about a product, then the price with a discount and an info icon:

Preview of the widget:

This is a simplified version of the widget, to be able to focus on the issue that I have. The issue is that when the price is very long, and the two prices, the discounted one and the previous one, go one below the other (due to the flex-wrap property), the container which holds the prices (.long-text) takes more space than desired, the info icon going far away from the prices:

Preview of the unwanted behavior:

How can I fix this? I think it's related to flexbox trying to make space for an element that doesn't have enough space on one line.

Here is the code of the widget:

.parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description {
  flex-grow: 1;
}

.info {
  border: 1px solid #aaa;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  text-align: center;
  line-height: 20px;
  color: #aaa;
}

.long-text {
  margin-left: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.long-text span {
  display: block;
}

<div class="parent">
  <div class="description">Product info</div>
  <a class="info" title="X% discount">i</a>
  <div class="long-text">
    <span style="text-decoration: line-through;">£8,888,888,888,888.88</span>
    <span style="margin-left: 5px; color: green">£8,888,888,888,888.88</span>
  </div>
</div>

Thanks!