title: How do I change elements position inside td tag
body: <p>I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside <code>td</code> tags in order to look it nice? The result I have now is here:</p>
  
  <p><a href="https://i.stack.imgur.com/x4TSL.png" rel="nofollow noreferrer">Current result with no position formatting</a></p>
  
  <p>I want it to look like like this:</p>
  
  <p><a href="https://i.stack.imgur.com/G9Bx5.png" rel="nofollow noreferrer">The way it's supposed to look</a></p>
  
  <p>I've tried to do it with CSS formatting using relative position feature like this</p>
  
  <pre><code>.leftSide
  {
      position: relative;
      bottom:250px;
  }
  </code></pre>
  
  <p>And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of <code>td</code> tag, but then I do it, elements are out of the table). How can I avoid it?
  My whole code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.splitTable {
    width: 100%;
    height: 100%;
    border: 6px solid #05788D;
    border-collapse: collapse;
  }
  
  .sides {
    border: 6px solid #05788D;
  }
  
  .SSRSSObjectCostTableTest {
    border: 3px solid #05788D;
    border-collapse: collapse;
    width: 30%;
  }
  
  .sideForSSRSSTables {
    border: 3px solid #05788D;
  }
  
  .partsTable {
    height: 7%;
    width: 95%;
    border-collapse: collapse;
  }
  
  .sideForPartsTable {
    border: 3px solid #05788D;
  }
  
  .leftSide {
    position: relative;
    bottom: 250px;
  }
  
  .rightSide {
    position: relative;
    bottom: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="splitTable"&gt;
    &lt;tr&gt;
      &lt;td class="sides"&gt;
        &lt;div class="leftSide"&gt;
          &lt;span class="chooseText"&gt;Choose&lt;/span&gt;
          &lt;table class="SSRSSObjectCostTableTest" width="25%"&gt;
            &lt;tr&gt;
              &lt;td class="sideForSSRSSTables"&gt;Say this is 1st element&lt;/td&gt;
              &lt;td class="sideForSSRSSTables"&gt;Say this is 2nd element&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td class="sides"&gt;
        &lt;div class="rightSide"&gt;
          &lt;span class="partsText"&gt;Parts&lt;/span&gt;
          &lt;button type="button" class="addButton"&gt;+Add Part&lt;/button&gt;
  
          &lt;!--&lt;table class="outerPartTable"&gt;--&gt;
  
          &lt;table class="partsTable"&gt;
            &lt;td class="sideForPartsTable" width="5%"&gt;Expand button&lt;/td&gt;
            &lt;td class="sideForPartsTable"&gt;Title + sum1 + sum2&lt;/td&gt;
            &lt;td class="sideForPartsTable" width="5%"&gt;edit&lt;/td&gt;
            &lt;td class="sideForPartsTable" width="5%"&gt;remove&lt;/td&gt;
  
          &lt;/table&gt;
          &lt;!--&lt;/table&gt;--&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>