I currently have this:

![enter image description here](https://i.stack.imgur.com/O8Yd2.png) 

Here is the HTML:

```
`<li>
   <a href="#companyprofile">
      <img class="ui-li-thumb picture" src="img/album-bb.jpg">  
      <h3>Acura</h3>
      <p>Rating: <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span> 
      <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span>
      <span class="fa fa-star fa-1x" style="color:yellow"></span></p>
      <p class = "open">open</p>
      <p style="background-color:blue !important;">Fixes Geysers</p>
  </a></li`>

```

Now my problem is that the blue for the fix geysers goes to the end of the li tag. Now To fix this is simple. I just set a width:7em to the p tag. BUT I would like to know is, is their a way to now specify the width and always just have the background color wrap around the text? My reason being for this is the services I will be pulling from a database and the text length will vary. I just want to have the blue wrap the text. I'm not sure how to dynamically do this based on the text.