Отслеживание ширины элемента в зависимости от меняющейся ширины (наполнения) соседнего элемента

Подскажите, пожалуйста, способ, как отслеживать изменение ширины элементы в зависимости от изменения ширины соседнего элемента? Например:

<section class="widget-bar">
 <section class="all-notes">
  <!--Здесь пользователь добавляет какое-то количество заметок.
   В зависимости от увеличения количества заметок, ширина этого контейнера увеличивается,
   а соседнего, где календарь, уменьшается.-->
 </section>

 <div class="mini-calendar">
  <section class="current-month">
   <!-- Этот элемент виден всегда-->
  </section>
  <section class="next-month" >
  <!-- Этот элемент нужно показывать, если ширина этого контейнера
   осталась больше определенного числа пикселей-->
  </section>
 </div>
</section>

Пробовала window.innerWidth и прослушивала ширину экрана. Но это не подходит, потому что мы не изменяем ширину экрана, изменяется ширина соседнего элемента.