JSFiddle - React, Tailwind, and code Playground

HTML

<div id="legend" style="border:1px solid black; max-width:75%; float:right;">
    <table style="padding: 2px;">
        <tr>
            <td><span style="color:red; font-weight: bold;">*</span>
            </td>
            <td>some text goes here.</td>
        </tr>
        <tr>
            <td><span style="color:red; font-weight: bold;">**</span>
            </td>
            <td>Some text goes here again</td>
        </tr>
        <tr>
            <td><span style="color:red; font-weight: bold;">**</span>
            </td>
            <td>yup..some other text goes here again.dfdsfdsfsf</td>
        </tr>
    </table>
</div>
<div style="clear:both"></div>
<div id="backToSearch">
    <button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span>
    </button>
</div>