JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    'm trying to lay one div over another. This is really simple if you know the dimensions of the div.

Solved here: How to overlay one div over another div How to overlay one div over another div

So, here is my HTML:

<div class="container">
  <div class="overlay"></div>
  <div class="content"></div>
</div>

      <p>In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).</p>

      <p>One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.</p>

      <p>Is there any way of solving this problem in CSS?</p>  
  </div>
</div>

CSS

.container {
  position: relative;
}

.overlay {
  position: absolute;
  z-index: 1000;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #f00;
  opacity: .25;
}

.content {
  
}