multi-line h1 container width doesn't shrink-to-fit the width of the text inside it

This should explain what I mean: https://jsfiddle.net/cucocreative/5w1nmeoq/13/

when the h1 wraps onto 2 lines the container doesn't reduce in size as expected. As you can see (after reducing the width of the browser) when it wraps onto 2 lines, after the last word on line 1 there is a gap - in image below marked in red

code sample to demonstrate the issue:

body {
  margin: 0;
  padding: 0;
}

.tagline {
  margin: 0;
  width: fit-content;
  margin-right: 10px;
}

.blackBlock {
  background-color: #000;
  padding: 20px 40px;
  margin: 0;
}

h1 {
  color: #fff;
  background-color: pink;
}

<div class="tagline">
  <div class="blackBlock">
    <h1>Porta Ridiculus Elit Lorem</h1>
  </div>
</div>

how do i get it so it does this instead?

So as width:min-content does it - but without the side-effect of it reducing the width down the longest word.