JSFiddle - React, Tailwind, and code Playground

by Arkadi Chubrik

HTML

<table border>
<tr>
    <td>
        <p>123lsdjfh alskdjfh askldfh aklsd hflaksjdh fklajsdh flkajsdh flakjsdh flkajsdh flkjash dlfjash dlfkjash df</p>
    </td>
    <td class="brace">
        <div style="background-color: green; width: 20px; height: 20px"></div>
        <div style="background-color: red; width: 20px"></div>
        <div style="background-color: green; width: 20px; height: 20px"></div>
    </td>
</tr>
</table>

JavaScript

window.onload=function(){brace()};
window.onresize=function(){brace()};

function brace(){
    var tags = document.getElementsByClassName("brace", null, "td");
    for (i = 0; i < tags.length; i++)
        tags[i].getElementsByTagName("div")[1].style.height = 0;
    for (i = 0; i < tags.length; i++)
        tags[i].getElementsByTagName("div")[1].style.height = tags[i].clientHeight - 22 + "px";
};