JSFiddle - React, Tailwind, and code Playground

HTML

<p>This is a long text. It will wrap at some point. To prevent it go below the asterix I put it all in a table. The asterix is in a table cell. This text is in a table cell. So everybody is happy. Is there a table-less way of doing it?</p>

<p>And here is another text. It will wrap at some point. To prevent it go below the asterix I put it all in a table. The asterix is in a table cell. This text is in a table cell. So everybody is happy. Is there a table-less way of doing it?</p>

CSS

p
{
    margin-left: 1.5em;
    display: block;
}

p:before
{
    content: "*";
    margin-left: -1em;
    display: inline-block;
    position: absolute;
}