Place div over 2 other divs, unknown content - CSS only - html

Question

I want to stack a div over 2 other divs, all 3 with unknown content, so the padding bottom of 1 and padding top of 3 should not be hardcoded. Is there any CSS-only solution for this?
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px
}
.stacked .first {
background: red;
padding-bottom: 100px
}
.stacked .third {
background: blue;
padding-top: 100px
}
.stacked .second {
margin: 0 auto;
max-width: 50%;
position: relative
}
.stacked .second>div {
background: green;
display: block;
padding: 20px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>

Answer 1

As you want items to be placed with space for their content we cannot have the inner (green) div positioned absolute.
This snippet has the first second and third divs just one below the other as standard. The first and third have their red and blue backgrounds respectively.
The second has a linear-gradient background, half red, half blue.
This snippet uses flex to position the texts centrally within each div but of course you can remove that if required.
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px;
display: flex;
align-items: center;
}
.stacked .first {
background: red;
}
.stacked .third {
background: blue;
}
.stacked .second {
background-image: linear-gradient(red 0 50%, blue 50% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.stacked .second>div {
max-width: 50%;
background: green;
padding: 20px;
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>