JQuery Animate() showing sticky behaviour with other elements in the same class

for some reason all the .inner-card elements show some kind of animation, it is as if they are all erratically calculating their positions, instead of just the one element with the mouse hovering over it being animated cleanly. any idea how can i fix this ?

Link to Code

HTML:

    <div id="say-block">

        <div class="outer-card">
            <div class="inner-card">1</div>
        </div>

        <div class="outer-card">
            <div class="inner-card">2</div>
        </div>

        <div class="outer-card">
            <div class="inner-card">3</div>
        </div>

    </div>
</body>

This is CSS

#say-block{
    display: inline-block;
    margin-top: 1em;
    height: 4em;
    text-align: center;
    font-size: 3em;
    background-color: #B7E4DF;
    padding: 1em;
    background-image: none;
    border-radius: 0.2em;
}

.outer-card{
    border:solid;
    display: inline-block;
    text-align: center;
    width: 1em;
    background-image: none;
    border-radius: 0.2em;
}

.inner-card{
    color: #FFFFFF;
    background-color: #680148;
    background-image: none;
}

This is .JS

$(document).ready(function() {
   $('.inner-card').mouseenter(function() {
       $(this).animate({
        height: "+=0.5em"
     },
     500,
     'linear'
     );
   });
   $('.inner-card').mouseleave(function() {
       $(this).animate({
           height: "-=0.5em"
       },
       500,
       'linear'
       ); 
   }); 
});