JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value=Left onclick="document.getElementById('aaidi').className = 'right';document.getElementById('aaidi3').className = 'left';">
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="30px">
<tr>
           <td colspan=3>
              <div id="aaidi" class="left">
              </div>
              <div id="aaidi3" class="right">
              </div>
           </td>
        </tr>
</table>

CSS

#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;
float:left;
}
.right {
margin-left: 55%;
border: 1px solid green ;
width: 20px;
height: 4px;
background: #FF0000;

}