Here is the shortest solution by using pure css and less line of code and responsive as well, there are other solutions also. But I changed a bit HTML to make CSS image, because if you want paragraph of same with of title then you must put in the title container.

I hope this will help your problem.

.site-complete-message {
    text-align:center;
    margin: 0 auto;
}
h1{
  display:inline-block;
}

.complete-text-wrap {
    width:280px;
    margin:0 auto;
}

<div class="site-complete-message">
   <div class="complete-title-wrap">
      <h1>You have levelled up</h1>
      <div class="complete-text-wrap">
        <p>You've completed this section. Please continue to the next page in order to              level up again.
        </p>
      </div>
   </div>
   
</div>

I think you can’t do it with pure CSS, you would need to use some javascript or jquery. See my javascript example below (just copy and paste it in your code below the divs)

<script>
const element = document.querySelector(".complete-title-wrap"), // find the title div element
      style = window.getComputedStyle(element), // get it's current style values
      width = style.getPropertyValue('width'); // get the width value
document.querySelector(".complete-text-wrap").style.width = `${width}px` // assign the same width to text dive element
</script>

This would always have the paragraph width exactly the same width as the title. It’s not responsive, but I think adding responsiveness is outside the scope of this question.

I have a completion message that would look a lot better if the paragraph below it was bound by the width of its title.

Currently it looks like this

Which is an issue because the paragraph flows larger than the width of the title.

.site-complete-message {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.complete-title-wrap {
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
}

.complete-text-wrap {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    text-align: center;
}

h1 {
  margin: 0;
}

p {
  margin: 0;
}

<div class="site-complete-message">
   <div class="complete-title-wrap">
      <h1>You have levelled up</h1>
   </div>
   <div class="complete-text-wrap">
      <p>You've completed this section. Please continue to the next page in order to level up again.</p>
   </div>
</div>

This would need to work no matter the title or the text because they may differ. The title will occasionally be across two lines but this already wraps because of the DIV it is within.

Any solutions are welcome. I saw this question but it isn’t taking the same initial approach as mine because I’m not using inline styles or floating. Also, this is not the same as this question about matching text to the size of an image because this is text & text so isn’t comparable as it won’t always have a fixed width.