Spacing lines of a single paragraph vertically

Issue

I have a <p> element that I put inside of a box. As a result the single line of text has collapsed into multiple lines of text. How to I space the multiple lins of text out vertically?

        
        <div class="Test1">
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="date">8 months ago</span>
            <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
            <p>-Andrew M.</p>
        </div>
        <div class="Test2"><span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="date">2 months ago</span>
            <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
            <p>-Kenneth W.</p></div>
        <div class="Test3"><span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star checked"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="date">2 days ago</span>
            <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
            <p>-Regina T.</p></div>



</div>

<style>
.testimonials-container {
    margin-top: 3em;
    width: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.testHeading {
    text-align: center ;
    margin-top: 2em;
}

.test {
text-align: left;
text-indent: 2em;
}
.checked {
    color: orange;
}

.date {
    margin-left: 1em;
}

p {
    margin: 10px 0;
}
</style>

Solution

Use line-height property in css for your <p> tag.

.test {
    line-height: 10px; //Or some other value to adjust
}

Answered By - iftikharyk