JSFiddle - React, Tailwind, and code Playground

HTML

<p id="address">
  address.com
</p>
<div class="parent1">
  <div class="zoom" id="zoom">
    <div class="page-zoom-controls-c">
      <div class="reset-zoom-c" title="Reset Zoom">
        <button tabindex="-1" class="button-textonly-c">
          <span class="button-title-c">Reset</span>
        </button>
      </div>
      <div class="button-toolbar" title="Zoom Out">
        <button tabindex="-1">
          <span>
            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 8C4 8.55228 4.44772 9 5 9H11C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7H5C4.44772 7 4 7.44772 4 8Z"></path>
            </svg>
          </span>
        </button>
      </div>
      <span class="zoom-percent">100 %</span>
      <div class="button-toolbar" title="Zoom In">
        <button tabindex="-1">
          <span>
            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
              <path d="M7 7V5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55228 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44772 4.44772 7 5 7H7Z"></path>
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
<button id="button" class="myButton">Run Effect</button>

CSS

.zoom {
  /* height: 100%; */
  width: 0;
  height: 20px;
  position: absolute;
  z-index: 1;
  bottom: -4px;
  right: 0;
  background-color: red;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.5s;
  /* display:inline-block; */
}

#address {
  display:inline-block;
  background-color: yellow;
  transition: 0.5s;
  margin: 0;
  width: auto;
}

button {
  display:inline-block;
  /* float: right; */
}

.parent1 {
  /* float: right; */
  display:inline-block;
  position: relative;
  background-color: blue;
}

.page-zoom-controls-c {
  display:inline-block;
}

.button-toolbar {
  display:inline-block;
}

.reset-zoom-c {
  display:inline-block;
}

body {
  background-color: blue;
}

JavaScript

function openNav(nav, elToLeft) {
  nav.style.width = "250px";
  elToLeft.style.marginRight = "250px";
  console.log("open");
}

function closeNav(nav, elToLeft) {
  nav.style.width = "0";
  elToLeft.style.marginRight = "0";
	console.log("close");
}

function navToggle(nav, elToLeft) {
	console.log(nav.offsetWidth);
    if (nav.offsetWidth === 0) {
      return openNav(nav, elToLeft);
    } else {
      return closeNav(nav, elToLeft);
    }
}


document.getElementById("button").addEventListener('click', function() {
	let nav = document.getElementsByClassName("zoom")[0];
  let elementToTheLeft = nav.parentElement.previousElementSibling;
  console.log(nav.parentElement.previousElementSibling)
  navToggle(nav, elementToTheLeft);
});