positioning elements right property based on other dynamic values with CSS JS

I have a primary menu with two sub-menus nested inside. the sub menus are revealed on a hover, and have a dynamically changing width based on the content inside. I need the sub menus position relative to the main menu to be: the left border of the sub menu is touching the right border of the main menu and they are not overlapping. Common functionality of a sub menu on hover reveal I suppose.

So I believe the math for the css right positioning is something like:

right: -elements current width in px

I don’t believe theres a way in css to insert the elements current width value into the right position so I have tried with JS

    let subMenuBounds = subMenuOne.getBoundingClientRect()
    let subMenuTwoBounds = subMenuOne.getBoundingClientRect()

    subMenuOne.style.right = `-${subMenuBounds}px`
    subMenuTwo.style.right = `-${subMenuTwoBounds}px`

the problem with this is the subMenus have no bounds until I hover over the menu, because the display is set to: none.

any solution to this?

    let subMenuBounds = subMenuOne.getBoundingClientRect()
    let subMenuTwoBounds = subMenuOne.getBoundingClientRect()

    subMenuOne.style.right = `-${subMenuBounds}px`;
    subMenuTwo.style.right = `-${subMenuTwoBounds}px`;

.sub-menu-one,
.sub-menu-two {
  height: auto;
  width: auto;
  min-width: 12rem;
  position: absolute;
  top: 0;
  right: ??;
  border-radius: 5px;
  display: none;
  opacity: 0;
  transition: all 350ms;
  border: 1px solid #e4e4e4;
  background-color: #2e1a04;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 3;
}

.menu-row:nth-child(2):hover > .sub-menu-one,
.menu-row:nth-child(3):hover > .sub-menu-two {
  opacity: 1;
  transition-delay: 350ms;
  display: block;
}

<div class="menu">
        <div class="menu-container">
            <div class="menu-row">
                <i class="fa-solid fa-book"></i>
                <h2>Syno &bull; Checker</h2>
                <span id="menu-close-btn">X</span>
            </div>
            <div class="menu-row">
                <p>Definition</p>
                <i class="fa-solid fa-caret-right"></i>
                <div class='sub-menu-one'>
                    <div>
                        <blockquote>
                            <p id="selected-word"></p>
                        </blockquote>
                    </div>
                    <div class="definition"></div>
                </div>
            </div>
            <div class="menu-row">
                <p>Synonyms</p>
                <i class="fa-solid fa-caret-right"></i>
                <div class='sub-menu-two'>
                    <div>
                        <blockquote>
                            <p id="selected-word-two"></p>
                        </blockquote>
                    </div>
                    <div class="options"></div>
                </div>
            </div>
        </div>
    </div>