JSFiddle - React, Tailwind, and code Playground

by Christopher Pearson

HTML

<ul>
    <li>Looks normal</li>
    <li>Looks normal with a<br>line break too.</li>
    <li>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</li>
</ul>

CSS

ul {
    list-style-type: none;
    padding: 0;  
}
li {
    padding:0 0 0 .5em;
}
li:before {
    content:"- "; 
    position:relative;
    vertical-align: top;
}