[SOLVED] How to justify rows in a poem

How to justify rows in a poem

I want to display poems in rows such that the ends of the rows are aligned, in order to emphasize the rhyming, like this:

<div style='text-align:justify'>
<p>aaaa aaa aaaaaa aa aaa aaaa</p>  
<p>aaaa aaa aaaaa aaa aaaa aaaa</p>  
<p>aaa aaaa aaaa aaa aaaaa</p>  
<p>aa aaaaa aaaa aaaaa aaaaa aaaaa</p>  
</div>

But this didn't work - most probably because each line is considered an individual paragraph.

Any ideas?

Solution

What you can do is to use pseudo element :after to make p text not the last line of text, so that it will be justified properly:

div {
    text-align: justify;
    background: #EEE;
    width: 200px;
}
div p:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Ruculis merti asani.</p>
    <p>Tedrima ergi nihil et capet,</p>
    <p>Puritumus lasi ce lani.</p>
</div>