title: animate line under two css tabs
body: <p>Please I wanna know how to create an animation like this one using JS or Jquery or Vue Transitions, (I am using bootstrap).</p>
  
  <p>I want to move the line under the TAB1 to the right when I click on TAB2. how can I animate the div to move smoothly from left to right and verse-versa ?</p>
  
  <p><a href="https://i.stack.imgur.com/NK8zF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NK8zF.png" alt="tabs animation"></a>
  This is my code:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
    &lt;div class="col-md-6"&gt;
          &lt;p&gt;TAB1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
          &lt;p&gt;TAB2&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
  &lt;span style="height:10px;background-color:"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>