How to make one div height equal the height of another?

Question

I want to cover up div with class main with div with class overlay. It is only working when I hardcode the height and width of overlay. This is not going to work because I am rendering multiple instances of main and they have different heights. I want to use a javascript script that will dynamically adjust the height of overlay to main.

.overlay {
  position: absolute;
  height: 500px;
  width: 500px;
  background-color: rgba(0, 0, 0, .22);
}

.maindiv {
  position: relative;
}

<div class="main">
  <div>
    <h1>
      header
    </h1>
  </div>
  <div class="overlay"></div>
  <Table class="maindiv">
    <th>adfasda</th>
    <th>adfasda</th>
    <th>adfasda</th>
    <th>adfasda</th>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
  </Table>
</div>

Answer 1

Please be clear that this is a CSS issue and not a React issue. If you want the overlay on the main div then you can give height 100% and width 100%. This way if the main div grows, the overlay will grow with it.

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.22);
  top: 0;
}

.main {
  position: relative;
}

<div class="main">
  <div>
    <h1>header</h1>
  </div>
  
  <div class="overlay"></div>
  <table class="maindiv">
    <th>adfasda</th>
    <th>adfasda</th>
    <th>adfasda</th>
    <th>adfasda</th>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
  </table>
</div>