如何解决CSS元素之间的冲突?

1) 独立模式: https://codepen.io/jaygray/pen/XPOZVy

2) 独立选项卡: https://codepen.io/jaygray/pen/VGgQrY

每个都按预期工作。

现在我想把“tabs”和“modal”集成起来。

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

当我移除 section ,我失去了选项卡选择将目标内容带入视图的功能。实例如下:

https://codepen.io/jaygray/pen/MqLQBq

如何修改CSS,使“tabs+modal”中的tabs与“tabs standalone”的工作方式相同?