I wanted each text to have a different color, so I used multiple span classes to set the colors in css. I also wanted the text to have line breaks, so I used a div. This fiddle shows the results I want, but the div tags used for line breaks create large gaps. Is there another way to do line wrapping in multiple span classes?

Fiddle: https://jsfiddle.net/nh7vswco/

<pre id="info">
       
                <div class = "fact-card">               
                <span class="animal">  animal</span>
                <span class="colon"> : </span>
                <span class="animal-name">tiger</span>
                <span class="comma">,</span> 
                </div> 
                
                <div class = "fact-card">
                <span class="animal">  species</span>
                <span class="colon"> : </span>
                <span class="animal-name">Mammal</span>
                <span class="comma">,</span>
                </div>
                
                <div class = "fact-card">
                <span class="animal">  type</span>
                <span class="colon"> : </span>
                <span class="animal-name">carnivore</span>
                <span class="comma">,</span>
                </div>

Result:
Each word and colon should have a different color.
animal : tiger,
species : mammal,
type : carnivore,

The result of this fiddle is: https://jsfiddle.net/nh7vswco/, but I want to remove the gaps in the div tags.