HTML/CSS对齐问题

我正在制作javascript文本滑块的动画，我已经对JS进行了排序，但我似乎无法解决文本对齐的问题。基本上，每一段文本都会垂直滑入滑出，但当我关闭滑块时，幻灯片的文本不会彼此重叠（这意味着在设置动画时，文本看起来不太正确）。我已经绝对地定位了第二个幻灯片元素，具有与容器相同的padding top值，理论上应该正确对齐它

这是一个代码笔链接

代码也在下面

<style>
.outerwrap {
background:red;
width: 100%;
height: inherit;
padding: 10% 5%;
}
.bb_slide_text2 {
position: absolute;
top: 0;
padding-top: 10%;
}
</style>

<section class="outerwrap">
  <div class="bb_slidetextwrapper2">
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

.外套{
背景：红色；
宽度：100%；
身高：继承；
填料：10%5%；
}
.bb_幻灯片_文本2{
位置：绝对位置；
排名：0；
垫面：10%；
}
第一标题
第一行文字

第二标题
第二行文字

任何帮助都会很棒

---

Emily

.bb\u slide\u text2

目标选择器应该是

.bb\u slide\u text

.bb\u slide\u text2目标选择器应该是

.bb\u slide\u text
这是你想要的吗？：这是你想要的吗？：谢谢Alejalapeno。谢谢Alejalapeno。