Вопрос об этих фильтрах или выпадающих меню

Question

Проблемы: (не обращайте внимания на верхний раздел)

• Когда я нажимаю флажок, также отображается результат другого флажка, и кажется, что он добавляет поле внизу потому что всплывающее окно перемещается вниз.

• Во-вторых, мне кажется, я не могу найти способ отобразить 2 раздела рядом.

• Можно ли сделать так, чтобы можно было выбрать только один флажок на раздел? И если пользователь передумает и установит другой флажок, он также изменит отображаемый результат.

здесь ссылка на кодовый блок: https://codepen.io/racrdvz/pen/RwWZrog

<div class="pickerSection">
<section>
  <div class="watchingFor">
    <p class="type">Watching for:</p>
    <div class="menuToggle">
      <div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn">  </div>
      <div class="menuToggleBtn">
        <span class='display beginner'>30 days</span>
        <span class='display intermediate'>60 days</span>
        <span class='display advanced'>90 days</span>
      </div>
    </div>
    </div>
  </div>
</section>

вот взгляд, который я ищу:

Прости меня за многочисленные вопросы, любая помощь и предложение будут очень ценными. Спасибо

Answer 1

решение для пункта 1 - используйте разные имена id и class для флажков, решение для пункта 2 - используйте классы строки и col, чтобы получить их в одной строке