Aligning 2 spans together for animation to happen on Firefox

Question

http://jsfiddle.net/StNm8/

<section class="first">
        <div class="welcome">
        <div>
        <span class="greet">
        Hello Fellas, Want to get an Excellent Quality Service
        </span>
        <span class="bounce">?</span> 

        </div>
        <p class="showThem">
        You are at the right place !
        </p>
        </div>
        </section>

This is the CSS:-

.first {
    background-color: #d8262e;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
    text-align: center;

}
.welcome{
    display:inline-block;
    vertical-align:middle;
    width: 75%;
    /* margin:75px auto 0; */

}
.greet, .bounce{
    color: white;
      /* display:block;  */ 

      /* float:left; */  
    font: 900 4.688em/1.2em "Times",sans-serif;


}
.greet{
    float:left;
}
.bounce{
    display:block;
}
.bounce::after{
    clear: both;
} 

.showThem{
    color:white;
    display: block;
    font:900 4.688em/1.2em "Karla",sans-serif;
}

.showThem:before{
    clear:both;
}

.bounce{
      -webkit-animation: bounceAnimate 350ms linear 0s infinite alternate;
    -moz-animation: bounceAnimate 350ms linear  0s infinite alternate;
    -o-animation: bounceAnimate 350ms linear  0s infinite alternate;
    animation: bounceAnimate 350ms linear  0s infinite alternate;   
}

@-webkit-keyframes bounceAnimate{
    0%{
        -webkit-transform:translate3d(0em,0em,0em);  
    }
    50%{
         -webkit-transform: rotate(20deg);
    }
    100%{
        -webkit-transform:translate3d(0em,0em,0em);
    }
}

@keyframes bounceAnimate{
    from{
        transform: translate3d(0em,0em,0em);
    }
    50%{
        transform: rotate(20deg);
    }
    to{
        transform: translate3d(0em,0em,0em);
    } 

}

I'm facing a problem while trying to align the 2 spans - greet and bounce together in a single line. The greet span is acting as a block and because of that the text in the 'bounce' span is appearing in the next line. I intend to see both the content of 'greet' and 'bounce' in the same line.

What I've tried at my end:-

I have tried to put the 'bounce' span in a paragraph and give class=greetto that paragraph as in this jsfiddle: http://jsfiddle.net/usLnG/1/, but, then, my animation does not run on Firefox and Safari

So, I would request you to guide me out of this problem.

Answer 1

Change .bounce to {display:inline-block;} and delete .greet{float:left;}. Making .greet float to the left is removing it from the normal document flow.

Code JSFiddle

Example JSFiddle