CSS или Javascript процент от другого элемента без плохого эффекта загружаемой страницы

Я попытался google и поиск переполнения стека для этого конкретного вопроса, но безуспешно.

Проблема заключается в том, что элемент, который я хочу установить ширину на основе другого элемента, уже загружен браузером в свою собственную ширину, а затем изменен javascript (мое текущее решение и большинство найденных мной решений), которое создает этот нежелательный переход при нагрузке.

Мой вопрос заключается в том, как установить ширину элемента с javascript перед el. загружен или есть какой-либо другой способ с CSS и некоторыми переменными или что-то еще?

CSS

#designsBar {
    position: absolute;
    top: 9rem;
    left: 12.5%;
    padding-right: 1rem;
    border-right: 1px solid #999;
}

Javascript

window.onload = function(e){
  var widthN = document.getElementById('logoTxt').offsetWidth + document.getElementById('pagelogo').offsetWidth;

  document.getElementById('designsBar').style.width = widthN - 16 + "px";
};