JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div class="star">*</div>
<div class="right">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?</div>
<div class="star">*</div>
<div class="right">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?<div>
</div>
CSS
td
{
vertical-align: top;
}
.star
{
clear:both;
width:5%;
float:left;
}
.right
{
width:95%;
float:left;
}