JSFiddle - React, Tailwind, and code Playground

HTML

<span class='large_line_height'>span with line-height span with line-height</span>
<span class='large_line_height'>span with line-height span with line-height</span>
<span class='large_line_height'>span with line-height span with line-height</span>
<br/>
<br/>
<div>default DIV default DIV default DIV default DIV</div>
<div>default DIV default DIV default DIV default DIV</div>
<div>default DIV default DIV default DIV default DIV</div>
<br/>
<br/>
<div class='sparse'>div_with_line_height div_with_line_height</div>
<div class='sparse'>div_with_line_height div_with_line_height</div>
<div class='sparse'>div_with_line_height div_with_line_height</div>
<br/>
<br/>

CSS

span {
  white-space: pre-wrap;
}


.large_line_height {
  line-height: 1.5em;
}

.sparse {
  line-height: 1.5em;
}

JavaScript

const spans = document.getElementsByTagName('span');
for (let i = 0; i < spans.length; i++) {
  spans[i].innerHTML += "\n";
}