Prevent flexbox child fill parent width after line break

i have a span and anchor in flex container, which are horizontally and vertically centered. Anchor text contains few non-braking spaces, which are necessary - on medium i want to display it as one-liner, on small it has to be two-liner, where the text of second line is defined by nbsps. My problem is, when comes to breaking anchor text on small, horizontal centering doesn't work, because anchor takes the rest of parents width so both label and anchor stay on the left side of parent.

Is there any way to prevent multiple line anchor fill parent's width?

Please check the following images and code snippet. Thank you for any ideas.

Medium works fine... Medium - fine

How it works on small and what i don't want small - don't want

What i want on small small - want

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.parent span {
  margin-right: 5px;
}

<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium, or&nbsp;two&nbsp;liner&nbsp;on&nbsp;small.</a>
</div>

Solution

One way would be to wrap the text that you want on the newline in a <span> tag and use a media query to determine at what width you would like the line break to occur. By default, <span> elements are inline, and will automatically grow to the size of their content/container. You need to explicitly set the <span> to be display: block in order for this to work. (I also removed all of the non-breaking spaces in your markup).

I'm sure there are plenty other solutions, this is just one idea.

Hope that helps & good luck!

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}

.parent span {
  margin-right: 5px;
}

@media (max-width: 400px) {
  .newline {
    display: block;
  }
}

<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium,<span class="newline">  or two line on small.</span></a>
</div>