JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td class='rotate'><div class='rotate'>10kg</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>20kgsss</td>
        <td class='rotate'><div class='rotate'>G</div></td>
        <td>H</td>
        <td>I0000</td>
        <td>J</td>
    </tr>
    <tr>
        <td>30</td>
        <td>L</td>
        <td>M</td>
        <td class='rotate'><div class='rotate'>N000pppppppppppppppp</div></td>
        <td>O</td>
    </tr>
</table>

CSS

td {
    overflow: hidden;
    border: 1px black solid;
    height : auto;
}

div.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    writing-mode: tb-rl;
}

JavaScript

$(document).ready(function () {
    $('tr').each( function() {
        $(this).find('td.rotate').css('height', $(this).find('div.rotate').width());
    });
    
});