Blockquote Background Color follow line length

Hi is is possible to make the background of my block quote follow the length of the line of text. Here is the following code of my block quote

<blockquote>
<p>£265,000 will make an XXL difference</p>
</blockquote>

My current CSS:

blockquote p {
    padding: 10px!important;
    text-align: right!important;
    font-size: 33px!important;
    color: #fff!important;
    font-weight: 600!important;
    font-family: $heading-fancy!important;
}
blockquote {
    background-color: #183052!important;
    float: right!important;
    width: auto!important;
    max-width: 250px!important;
    margin: 10px 0!important;
}

Here is how that currently looks. https://jsfiddle.net/2atm3ktn/

Is it possible to achieve this look with the background colour... https://s7.postimg.org/m29mkdwhn/example.png

I have achieved this effect before on headings by adding extra container (div) and using borders. Ideally there would be no more tags around the blockquote as then it is simple for the User to simply click blockquote in the WYSIWYG.

Ideas welcome.

You can do something like this, hope it helps.

blockquote p {
    padding: 10px!important;
    text-align: right!important;
    font-size: 33px!important;
    color: #fff!important;
    font-weight: 600!important;
    font-family: $heading-fancy!important;
    margin: 0;
    
}
blockquote {
  background-color: #183052!important;
    float: right!important;
    width: auto!important;
    max-width: 250px!important;
    margin: 10px 0!important;
    padding: 0;
}
span{ background-color: green;}

<blockquote>
<p>
<span>£265,000 will make an XXL difference</span>
</p>
</blockquote>