KononovD

из
<div class='btn-close-menu'>
в
<label class='btn-close-menu' for='menu'>
и будет работать

Тестил на iPhone SE2, большом количестве android-смартфонов - все работает

- не правда, оно физически не могло работать)

<div class="list-item-with-circle card-other-resource__item">
        <span class="list-item-with-circle__product">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
        <div class="list-item-with-circle__links-wrapper">
          <a href="# " class="link link_sm link_normal">
            Установка
          </a>
          <a href="# " class="link link_sm link_normal">
            Активация
          </a>
          <a href="# " class="link link_sm link_normal">
            Обновление
          </a>
        </div >
      </div >

.list-item-with-circle__links-wrapper{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}

Определите в каком блоке какого цвета у вас должны быть элементы, положите эти цвета в классы в css, отмеряйте расстояние от верха страницы: (offsetTop) и когда вам нужно, когда скролл достигнет какой-то высоты - добавляете нужным элементам этот класс) зачем вам библиотека? jq совсем уже убил желание думать?) (не в обиду)
на нативном js такая функция пишется в x*2 +n строчек кода, где x - количество ваших блоков, а n - количество элементов, которым надо классы добавлять)
формулу придумал только что, она может быть слегка неточная)))

Если с флексами все не очень, можно флоатами:
https://codepen.io/Kononov_D/pen/KYKymL

очевидно, тексту не хватает места, что бы быть в одну строку, спан/див тут не при чем.
можете сделать

.bonus_packege{
white-space: nowrap;
}

и тогда текст перестанет переноситься вообще

если я правильно понял, то:
надо брать высоту правого блока(scrollHeight) и когда позиция окна(pageYOffset) будет = scrollHeight - window.clientHeight - левому блоку даем обычное позиционирование и они оба скроллятся вниз

Мне кажется, это кастомный селект надо делать)

схема очень похожая
https://codepen.io/Kononov_D/pen/KJYBJM

только в первых двух дивах у вас будет 2 ul, а в 3 3 ul ))
ну короче там сами игрйтесь уже с размерами, но, я думаю, основной месседж флексов понятен)

Ячейке даем атрибут data-id;
В js создаем глобальный объект, какой-нибудь basket.
На ячейки вешаем ивент листнер и при клике будет вызываться функция, которая будет записывать data-id ячейки в глобальный объект.

Потом надо сделать еще какую-то кнопку, на которой будет висеть функция отправки basket'а

И усе)