title: Align <div>'s in <td> horizontally
body: <p>I want to align three <code>div</code>'s horizontally in a <code>td</code>.</p>
  
  <p>I want also change <code>div</code> of <code>A</code> and <code>B</code> in the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/qfhFJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qfhFJ.png" alt="enter image description here"></a></p>
  
  <p>It is just important that <code>A</code> goes left side of the <code>SecondOne</code> and <code>B</code> on the right of it. I used <code>span</code> as well but it didn't work.</p>
  
  <p><a href="https://jsfiddle.net/reshadgp/w5zu09ny/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div style="width: 55px; background: yellow; margin-left: 50px;"&gt;
          FirstOne
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div style="width: 11px; background: red; margin-left: 50px"&gt;
          A
        &lt;/div&gt;
        &lt;div style="width: 75px; background: green; margin-left: 50px;"&gt;
          SecondOne
        &lt;/div&gt;
        &lt;div style="width: 11px; background: red; margin-left: 50px"&gt;
          B
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div style="width: 65px; background: blue; margin-left: 50px;"&gt;
          ThirdOne
        &lt;/div&gt;
      &lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>