CSS display:inline is not working

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!