如何阻止div推动div

Question

我有一个随机数量的div，它们在悬停时扩展，并且在它们下面的div应该保持在同一个地方，当它上面的div悬停时。我不想使用position: absolute或position: fixed，因为我不希望悬停的div超过它们下面的div。

$('.test').hover(function(){
    $('.test2').toggleClass("up");
});

.container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.test {
    width: 100%;
    height: 40px;
    background-color: tomato;
    margin-bottom: 5px;
    transition: 0.2s all;
	transition-timing-function: ease-in;
}

.test:hover {
    height: 60px;
}

.test2 {
    width: 100%;
    height: 40px;
    background-color: steelblue;
    margin-top: 40px;
    transition: 0.2s all;
	transition-timing-function: ease-in;
}

.up {
    margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="container">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>
<div class="container">
    <div class="test2"></div>
</div>

这是一个JSFiddle与我到目前为止所得到的：http://jsfiddle.net/0beomccn/

当你悬停一个div时，我的解决方案会阻止div被按下，但如果你从一个div转到另一个div，则div会被推下一小段时间，导致看起来像是一个口吃。