HTML / CSS Alignment Issue

Question

I am animating a javascript text slider and I have the JS all sorted, but I can't seem to sort out the problem with the text alignment. Basically each piece of text slides in and out vertically, but when I have the slider turned off, the text for the slides don't sit on top of each other (this means when animating, the text doesn't quite look right). I've positioned the second slide element absolutely, with the same padding-top value as the container, which theoretically should align it correctly?

Here is a codepen link http://codepen.io/emilychews/pen/oBPjbR

And the code is also below.

<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>

Any help would be awesome.

Emily

Answer 1

.bb_slide_text2 target selector should be .bb_slide_text