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>

CSS

td
{
    vertical-align: top;
}