JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
    <td>*</td>
    <td>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?</td>
    </tr>
        <tr>
    <td>*</td>
    <td>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?</td>
    </tr>
</table>

<ul>
    <li> * 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?</li>
    <li>* 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?</li>
</ul>

CSS

td
{
    vertical-align: top;
}

    ul {
 list-style: none;
 margin-left: 0;
 padding-left: 1em;
 text-indent: -1em;
 }