Implement a specific size for a div

Question

I want my table to be the same size as the div that contains my iframe. Is that possible? If so, what am I doing wrong?
Obs: I am posting the parts of my code that affect the div that contains iframe and my javascript implementation to set the same size in the table.

var tableheight = document.getElementsByTagName("video-wrapper").offsetHeight;
  document.getElementsByTagName("table").style.height = tableWidth;

table {
    width: 100%;
    display:block;
}

tbody {
    display: inline-block;
    width: 100%;
    overflow-y: auto;
    padding: 10px;
    background-color: black;
    border: 2px solid white;
}

tbody tr{
  margin: 2px solid white;
}

.video-wrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="content-wrap">
              <div class="video-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/z9Ul9ccDOqE" allowfullscreen></iframe></div>
            </div>
            
<table id="tableEsport">
  <tbody>
  </tbody>
</table>

Answer 1

Your code has some errors:

Here you want to select the class by the tag that does not exist and is using the class name, not to mention that you need to specify an index, because this form if selection results in an array:

var tableheight = document.getElementsByTagName("video-wrapper").offsetHeight;

The right thing would be to use getElementsByClassName:

var tableheight = document.getElementsByClassName("video-wrapper")[0].offsetHeight;

On the other line the problem is similar, only need to specify the index and add "px", because the CSS does not recognize height without the type of value (px, em, vh, % etc.). The right would be:

document.getElementsByTagName("table")[0].style.height = tableheight+"px";

However, there are far more lucid ways to select these elements, using querySelector:

var tableheight = document.querySelector(".video-wrapper").offsetHeight;
document.querySelector("#tableEsport").style.height = tableheight+"px";

So you select the elements by class and by id.

Obs.: when selecting a class with querySelector, it is important to make sure that there is only 1 element with this class. If there is more of 1, the querySelector you’ll only get the first.

Behold:

var tableheight = document.querySelector(".video-wrapper").offsetHeight;
document.querySelector("#tableEsport").style.height = tableheight+"px";

table {
    width: 100%;
    display:block;
}

tbody {
    display: inline-block;
    width: 100%;
    overflow-y: auto;
    padding: 10px;
    background-color: black;
    border: 2px solid white;
}

tbody tr{
  margin: 2px solid white;
}

.video-wrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video-wrapper iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="content-wrap">
   <div class="video-wrapper"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/z9Ul9ccDOqE" allowfullscreen></iframe></div>
</div>
            
<table id="tableEsport" bgcolor="#D51C1F">
  <tbody>
  </tbody>
</table>