How do I change elements position inside td tag

Question

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 ; tags in order to look it nice? The result I have now is here:

Current result with no position formatting

I want it to look like like this:

The way it's supposed to look

I've tried to do it with CSS formatting using relative position feature like this

td

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 .leftSide { position: relative; bottom:250px; } tag, but then I do it, elements are out of the table). How can I avoid it? My whole code below:

td

.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;
}

Answer 1

Hope, this helps :)

plt.tick_params(labelleft='off', labelright='on', direction='in', right='on', left='off', bottom='off')

.splitTable {
  width: 100%;
  height: 100vh;
  border: 6px solid #05788D;
  border-collapse: collapse;
}

.sides {
  border: 6px solid #05788D;
  position: relative;
  width: 50%;
}


.sideForSSRSSTables {
  border: 3px solid #05788D;
}

.partsTable {
  height: 7%;
  width: 95%;
  margin-top:30px;
  border-collapse: collapse;
}

.sideForPartsTable {
  border: 3px solid #05788D;
}

.leftSide {
  display: flex;
  flex-direction:flex-end;
  position: absolute;
  top: 20px;
  width:90%;
  left:50%;
  transform:translateX(-50%);
}

.leftSide>* {
  flex: 1;
}

.SSRSSObjectCostTableTest {
  border: 3px solid #05788D;
  margin: 5px;
  border-collapse: collapse;
}


.rightSide {
  position: absolute;
  top: 20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
}

.addButton {
  float:right;
  margin-right:5%;
}