Child element with absolute position is not accepting the top and left values and therefore is not visible

https://jsfiddle.net/m4zrvjq7/

  1. there is a parent div with 100% width and some height
  2. there are two child div, leftChild and rightChild
  3. leftChild contains:
    3.1 a text input of fixed width (always visible on left side of parent div)
    3.2 a link styled as left arrow button of fixed width
    3.3 a div with id TABS that will add text elements of variable width
  4. rightChild contains:
    4.1 a link styled as right arrow button of fixed width
    4.2 a link styled as down arrow button of fixed width
    4.3 a sign-out link of fixed width (always visible on right side of parent div)

there is one more TEXT INPUT field and button to enter text which will be added in TABS

my requirement:

  1. left arrow button, right arrow button, and down arrow button are not visible initially
  2. when a text is added via TEXT INPUT, it is added in TABS and it grows
  3. while growing, it calculates if new text will overflow the fixed TABS width (as all other elements in parents have fixed width)
  4. in case of overflow:
    4.1 left arrow button, right arrow button, and down arrow button should be visible
    4.2 all the text elements in TABS should move left to make space for new text, and the left most text elements should be hidden (one of the hidden ones can be partially displayed)

As of now, the text elements when grows beyond TABS fixed width, they curl up with line break instead of moving left. Please help me.

Just adding small code snippet to meet the posting requirement as the actual code is too big. Please refer JSFiddle.

function adjustForOverflow(yOffset) {
  var tabList = tabs.children;
  let tabLeft = yOffset;
  for(let i = 0; i < tabList.length; i++) {
    tabList[i].style.top = 0;
    tabList[i].style.left = tabLeft;
    tabLeft += tabTextsWidth[i];
  }
}