JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%">
 <td width="50px" bgcolor="#E6E6FA">&nbsp;</td>
  <td>
    
    <div class="tabs-container">

    <!-- ABA 1 -->
    <input type="radio" name="tabs" class="tabs" id="tab1" checked>
    <label for="tab1">aba1</label>
    <div>

       asdasdasd


    </div>

    <!-- ABA 2 -->
    <input type="radio" name="tabs" class="tabs" id="tab2" >
    <label for="tab2">aba2</label>
    <div>

      sadsad

    </div>

</div>
    
    
  </td>
 <td width="50px" bgcolor="#E6E6FA">&nbsp;</td>
</table>

CSS

/* Container das ABAS */
.tabs-container {
    position: relative;
    top: 3px;
}
/* ABAS */
input.tabs {
    display: none;
}
input.tabs + label + div {
    width: 100%;
    padding:0px;
    opacity: 0;
    position: absolute;
    border: 1px solid #d7d7d7;
    top: 40px;
    left: 0;
    padding: 25px 0px 25px 0px;
}
input.tabs + label + div {
    z-index: -1;
}
input.tabs:checked + label + div {
    opacity: 1;
    z-index: 1;
}
/* Labels */
input.tabs + label {
    line-height: 40px;
    padding: 0 20px;
    float: left;
    background: #484848;
    color: #ffffff;
    cursor: pointer;
    margin-right: 1px;
}
input.tabs + label:hover {
    color: #ffffff;
    background: #fff;
}
input.tabs:checked + label {
    color: #000;
    background: #f1f1f1;
}

JavaScript

function corrige_altura() {
    $('.tabs-container').css({
      height: $('.tabs:checked + label + div').height() + 80  
  });

}

$(function(){
    corrige_altura();
});