How to make a div stretch on top of another div?

Question

css

Good afternoon. There is the following construction:

<div class="row">
<div class="col-lg-4  short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4  short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
</div>

Now the whole thing looks like this:
The user sees only the title of the list. If an onmouseenter occurs on a block, then the block increases in size vertically. If you do onmouseleave, then it returns to its previous size. The block sizes are adjusted using js, which calculates the sizes by which the block needs to be increased, plus, depending on the screen width, adds correction factors that correctly deploy the block on different devices. At the same time, neighboring blocks visually also change in size, as shown in Figure 1 and Figure 2, but in fact their dimensions do not change.


What I want to do:
I want to resize a block when hovering the mouse vertically down without affecting adjacent blocks. The list that should be displayed should cover the bottom block, as shown in Figure 3. I want to do this without js, because. I know that in a bunch of css + html it is really possible to do this, but my mind cannot achieve the desired result in any way. Many thanks in advance to everyone who will help me eliminate illiteracy.

Answer 1

absolute positioning.
https://jsfiddle.net/Louf1zbt/