JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<p>
    with some text 
    <br/>
    and another line
    <br/>
    and another line
</p>

<p>
    with some text 
    <br/>
    and another line
    <br/>
    and another line
</p>

CSS

p {
    margin: 5px;
}

.break {
    margin-left: 10px;
}

JavaScript

$('p').each(function(){
    
    var html = this.innerHTML;
    var htmlArray = html.split('<br>');
    var new_html = "<p>"+htmlArray[0]+"</p>";
    
    for(var i = 1; i < htmlArray.length; i++){
        new_html += "<p class='break'>"+htmlArray[i]+"</p>";
    }
    
    $(this).replaceWith(new_html);
    
});