Inline Block divs changing height on Active State

I want to have 4 boxes on my screen with some active effect like changing font size and some padding-top (to move the text down a little). everything is working well except that when I click on the boxes, it adds white space around that or the neighbouring boxes.

I have tried adding a span inside the div with inline-block 100% height/width and applying the :active class to that span instead, then it would work fine for the top two boxes but the bottom two boxes would still do the same thing.

https://jsfiddle.net/946v3o1t/4/

<div id="container"><div class="div one">div1</div><!-- 
--><div class="div two">div2</div><!-- 
--><div class="div three">div3</div><!-- 
--><div class="div four">div4</div></div>


@import url('https://fonts.googleapis.com/css?family=Acme|Righteous&display=swap');

body, html{
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: 'Acme', sans-serif;
        }
#container{
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow: none;
    }
.div{
    height: 50vh;
    width: 50vw;
    max-width: 50%;
    display: inline-block;
    text-align: center;
    line-height: 50vh;
    color: white;
    font-size: 4rem;
    overflow: none;
}
.div:hover{
    cursor: pointer;
}
.div:active{
    font-size: 3.8rem;
    padding-top: 5px;
}
.one{
    background-color: #005b9f;
}
.two{
    background-color: #004c40;
}
.three{
    background-color: #6c6f00;
}
.four{
    background-color: #a00037;
}

What do I need to change so that when I click on the boxes, it only update the content as styled and not change the height/width or style for the neighbouring divs.