I'm trying to align a value from a JSON table to the right in a Leaflet popup using the following code JavaScript:

    var popupContent = `<h3>${feature.properties.CDP_STATE}</h3><br>
         <h4>Socioeconomic Score:</h4><h5>${feature.properties.SE_WM}</h5><br>
         <h4>Composition & Disability Score:</h4><h5>${feature.properties.HCD_WM}</h5><br>

CSS:

h3 {
  font-family: "League Spartan", sans-serif;
  font-size:medium;
  font-weight: 400;
  text-align: left;
  letter-spacing: 1.5px;
  margin: 0;
}     

h4 {
  font-family: "IBM Plex Mono", sans-serif;
  font-size: 1em;
  font-weight:200;
  text-align: left;
  margin: 0;
}     

h5 {
  font-family: "IBM Plex Mono", sans-serif;
  font-size: 1em;
  font-weight:400;
  text-align: right;
  margin: 0;
}

It sort of works, the text is aligned right but breaks to a new line instead of being on the same line. Any thoughts on why this is happening?