JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id = "id1"> </li>  
    <li id = "id2"> </li> 
    <li id = "id3"> </li> 
    <li id = "id4"> </li> 
</ul>

CSS

ul li {
    white-space: pre;
}

JavaScript

$("#id1").text("a a");
$("#id2").text("a        a");
$("#id3").text("a&nbsp;&nbsp;a");
$("#id4").html("a&nbsp;&nbsp;&nbsp;&nbsp;a");