Border around takes up whole div width

Question

I'm trying to get the border of a <p> element to only take up the space occupied by text. Here's the relevant part of my html:

<h2 style="font-weight: normal;">

  <style>
      .border {
      border-style: solid;
      border-color: black;
  </style>

  Plate number:
  <br>
  <p class="border" style="">5649JSN</p>

</h2>

And here's how it looks:

How can I fix this? Thanks in advance

Edit: I can't know beforehand how much space the plate number will take

Answer 1

Illegal HTML does what illegal HTML does.

Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

Don't wrap your P in H2 or make H2 display:inline-block

.border {
  border-style: solid;
  border-color: black;
}

h2 {
  font-weight: normal;
  display: inline-block;
}

<h2>
  Plate number:
  <br>
  <p class="border">5649JSN</p>
</h2>

Better: don't use a P

.border {
  border-style: solid;
  border-color: black;
}

h2 {
  font-weight: normal;
}

<h2>
  Plate number:
  <br>
  <span class="border">5649JSN</span>
</h2>