Как решить конфликт между элементами CSS?

Question

Имеется два рабочих документа:

1) Автономный режим: https://codepen.io/jaygray/pen/XPOZVy

2) Автономный вкладки: https://codepen.io/jaygray/pen/VGgQrY

Каждый работает как задумано.

Теперь я хочу интегрировать «вкладки» с «модальными».

Но когда я добавляю вкладки к модальным, следующий CSS нарушает интеграцию (см. Сноску / подсказку № 2 в примере-3 ниже)

.input-a, section {
  clear: both;
  padding-top: 10px;
  display: none;
}

, когда я удаляю section, я теряю функцию, когда выбор вкладки отображает целевой контент.Вот пример:

3) модальные + вкладки: https://codepen.io/jaygray/pen/MqLQBq

Как изменить CSS так, чтобы вкладки в «вкладках + модальные» работали так же, как «вкладки-автономный "?