JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class = "one">This cell should has width 60%</td>
        <td class = "two">
            <div>
                <div class = "three">Hint</div>
                <div class = "four">
                    And ending of this string should be cutted out with ellipsis, no matter how long string will be</div>
            </div>
        </td>
    </tr>
</table>

CSS

table {
    width: 100%;
    table-layout: fixed;
}

td {
    border: 1px solid black;
}

.one {
    width: 60%;
    text-align: right;
}

.three {
    display: none;
    float: right;
}

.two:hover .three {
    display: block;
}

.four {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}