JSFiddle - React, Tailwind, and code Playground

by Arkadi Chubrik

HTML

<table border>
    <tr>        
        <td id="brace">
            <div></div>
            <div></div>
            <div></div>
        </td>
        <td>
            <p>123lsdjfh alskdjfh askldfh aklsd hflaksjdh fklajsdh flkajsdh flakjsdh flkajsdh flkjash dlfjash dlfkjash df 123lsdjfh alskdjfh askldfh aklsd hflaksjdh fklajsdh flkajsdh flakjsdh flkajsdh flkjash dlfjash dlfkjash df</p>
        </td>
    </tr>
</table>

CSS

p { 
    margin: 0;
}
#brace div {
    background-color: green;
    width: 20px;
    height: 20px;
}
#brace div:nth-child(2) {    
    background-color: red;
}

JavaScript

window.onresize = function() {
    var brace = document.getElementById("brace");
    var spring = brace.getElementsByTagName("div")[1];
    spring.style.height = 0;
    spring.style.height = brace.clientHeight - 42 + "px";
};