CSS display:inline is not working - html

Question

I saw that there are many questions looking like this one but can't find a solution yet.
My HTML code:
<p class="ref" style="display:inline">
<p class="mini-caps">albums</p>:
Scum
(1987) ;
Bootlegged in Japan
(1998)
</p>
<p class="ref">
<p class="mini-caps">compilation </p>:
Noise for Music’s Sake
(2 CD, 2003)
</p>
<p class="ref">
<p class="mini-caps">album</p>:
Illmatic
(1994)
</p>
I tried to style p.ref with display:inline with no success.
The output I would like to have:
albums : Scum (1987) ; Bootlegged in Japan (1998)
compilation : Noise for Music’s Sake (2 CD, 2003)
album : Illmatic (1994)

Answer 1

why the use of the p tags? You can properly do this with div's and span's.
<div class="ref">
<span class="mini-caps">albums</span>:
<span>Scum (1987) ; Bootlegged in Japan (1998)</span>
</div>
<div class="ref">
<span class="mini-caps">compilation </span>:
<span>Noise for Music’s Sake (2 CD, 2003)</span>
</div>
<div class="ref">
<span class="mini-caps">album</span>:
<span>Illmatic (1994)</span>
</div>
See https://jsfiddle.net/1r9Lu6y3/6/
Hope this helps
BTW: Illmatic album is sooo good!