JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 xxx<BR><BR>xXy<BR>...<BR>|<BR>_<BR>  i<BR>  <BR>  iii 
</p>
<p class='x'>
 xxx<BR><BR>xXy<BR>...<BR>|<BR>_<BR>  i<BR>  <BR>  iii
</p>

CSS

p.x br {
    display: block;
    margin: -10px 0px 3px 40px;
    padding: 1px 2px 3px 40px;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 8px;
    height: 8px;
    background: yellow;  
    background-image: url("https://sites.google.com/a/fundoogeek.com/home/images/WhiteStarinRedCircle.gif");
    background-repeat: no-repeat;
    background-position: top left;
    background-origin: content-box;
    color: blue;
    content: "A";
    width: 20px;
    position: relative;
     top: -7px;
}

p {
outline: 1px solid red;
font-size: 36px;     
line-heigth: 36px;     
width: 150px;
float: left;    
}