Div with text and 3 divs inside it filling it - html

Question

I would like to create a div which has auto height based on the length of the text inside it (the text should be in the parent element so that it has 100% width. But also there should be 3 divs in the background each taking 1/3rd of the parent width and being 100% of the parent height.
This is an example of what I expect.
Any ideas how to create this?
I usually don't post questions like this one. But I just got stuck on how to do that and I needed help

Answer 1

You can use Flexbox for this
.content {
display: flex;
position: relative;
}
h1 {
text-transform: uppercase;
font-size: 45px;
margin: 0;
font-family: sans-serif;
word-spacing: 15px;
}
.divs {
position: absolute;
z-index: -1;
width: 100%;
top: 0;
left: 0;
height: 100%;
display: flex;
}
.el {
flex: 1;
border: 3px solid lightgreen;
}
.el:nth-child(1) {background: #DBEBD4;}
.el:nth-child(2) {background: #CEE2F4;}
.el:nth-child(3) {background: #D9D2EA;}
<div class="content">
<h1>Lorem ipsum dolor sit.</h1>
<div class="divs">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
</div>

Answer 2

Have a container div absolutely positioned under the text and then have three child divs inside that.
The reason for the container div is that it avoids having to position each child separately.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.parent {
position: relative;
}
.underlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
border: 1px solid grey;
}
.child {
flex:1;
border:1px solid red;
background: rgba(255,0,255,0.25);
z-index:-1;
}
<div class="parent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt natus architecto deserunt eligendi repellat corporis doloribus fugit ipsam fugiat, eius vitae, magni? Quasi consequatur voluptatem eius excepturi eum qui dolores placeat maxime corporis
laborum hic, magnam ipsa voluptatibus doloremque. Dignissimos dolorum corporis sunt amet unde repellat, dolor consectetur earum.</p>
<div class="underlay">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>