I need to put two div elements at the same horizontal level. Doing the way I have done makes the second one get displayed under the first. I want to place them in a way that they cross over each other while transition.

Edit 1- Here when the button is pressed to swap their classes, divs move up and down.

#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%
......
        <tr>
           <td colspan=3>
              <div id="aaidi" class="left">
              </div>
              <div id="aaidi3" class="right">
              </div>
           </td>
        </tr> // after this there is a button pressing whom changes the class of both divs. 

• html
• css
• html5
• css3

You can achieve this using the float property:

<style type="text/css">
    div.container {
        margin: 15px;   
    }
    div.left, div.right {
        float: left;
        padding: 10px;    
    }
    div.left {
        background-color:orange;    
    }
    div.right {
        background-color: yellow;    
    }
</style>

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

See this jsFiddle for a demonstration. Here's the output:

Use a span, or you can set the style to display:inline-block

I believe you would like to float the divs

.float-left{
  float:left;
}

 <div id="aaidi" class="float-left left"></div>
 <div id="aaidi3" class="float-left right"></div>

If the right div is still being viewed as a 'block' element then it will take up the entire row. Both elements need to be floated, or specific widths need to be set.

see fiddle for code and demo

fiddle: http://jsfiddle.net/ht6M9/

demo: http://jsfiddle.net/ht6M9/embedded/result/

Just float all divs left if you require them to be side by side.

Depending on contents of div, you may need to assign a width to each class too.