Размещение двух элементов div на одном горизонтальном уровне

Мне нужно поместить два элемента div на один и тот же горизонтальный уровень. Делая так, как я, второй отображается под первым. Я хочу разместить их таким образом, чтобы они пересекались друг с другом во время перехода.

Редактировать 1- Здесь при нажатии кнопки для переключения классов элементы div перемещаются вверх и вниз.

#aaidi,#aaidi3 {
-webkit-transition: margin-left 1s ease-in-out;
-moz-transition: margin-left 1s ease-in-out;
-o-transition: margin-left 1s ease-in-out;
transition: margin-left 1s ease-in-out;
}
.left {
margin-left: 45%;
border: 1px solid green ;
width: 20px;
height: 4px;
background: #FF0000;
} // similar for right with margin-left:55%
......
        
           
              

              
              

              
           
         // after this there is a button pressing whom changes the class of both divs.