Is it possible to append two divs

Question

I'm trying to make a code so that if one div file is hovered/active it, along with another div will move at the same time not necessarily the same way.

Example: Two blocks, one on top and one of bottom of the screen. If the bottom block is hovered, it will move right by 60px. This should also affect the top block to move in some way.

Answer 1

.box{
position:absolute;
width:150px;
height:100px;
left:10px;
transition: 0.5s;
transition-timing-function:linear;
}

#top{
top:10px;
background:green;
}

#bottom{
bottom:10px;
background:red;
}

#top:hover{
left:200px;
}

#top:hover + #bottom{
left:500px;
}

<div class="box" id="top"></div>
<div class="box" id="bottom"></div>

One possible way to do it just with CSS.
You hover on the top one moves the second one also,
+ is used to select any of the elements next to the element before +.
~ can also be used when both the elements are siblings to each other.

Answer 2

yes it is possible you can append two div's tag