Как всегда сохранить моего родителя в форме круга?

div{
 width:10%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:5% 0;border-radius:50%;background:#09f
}

<div>33</div>
<div>1</div>
<div>888</div>

.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}

<span class = "numberCircle">30</span>
<span class = "numberCircle">1</span>
<span class = "numberCircle">5435</span>
<span class = "numberCircle">2</span>
<span class = "numberCircle">100</span>

$(window).on('load', function (){
    var biggestElement = 0;
    $('.circle').each(function (){
        if (biggestElement < $(this).outerWidth()){
            biggestElement = $(this).outerWidth();
        }
    });
    $('.circle').css({
        width: biggestElement,
        height: biggestElement,
        'line-height': biggestElement+'px'
    });
});

div{
    border:1px solid red;
    display: inline-block;
    border-radius:50%;
    text-align: center;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div class = "circle">10000000</div>
<div class = "circle">1</div>
<div class = "circle">888</div>