jquery - ウィンドウのサイズ変更中に div が互いに衝突したときに div の動きを止めるにはどうすればよいですか? (パーセンテージで配置)

Question

例えば：

HTML
<nav>
     <div class="first"></div>
     <div class="second"></div>
<nav>

CSS
.first{
padding-left: 10px;
padding-right: 15px;
width: 180px;
height: 100%;
position: absolute;
top: -1px;
}

.second{
position: absolute;
left: 30%;
top:14px;
padding-bottom: 10px;
}

ウィンドウのサイズを変更し、.second が移動して固定の .first. .first にヒットしたら、.second div の動きを止めることはできますか?

Answer 1

.first{
    padding-left: 10px;
    padding-right: 15px;
    width: 50%;
    height: 100%;
}

.second{
    padding-left: 10px;
    padding-right: 15px;
    width: 50%;
    padding-bottom: 10px;
}