Hud animation in a certain pattern, with CSS and HTML

I am trying to make a certain Hud pattern inside my game using CSS and HTML.
I already have it like this picture.

So I am trying to put it like this picture (Photoshop edit)

I tried many things doing this, one thing i had it but then it stays like it when for example the Heart one dissapears, what needs to be happen is if the heart one dissapears the shield one will take it’s place, such as the others will move on the other locations. My last edit made it only fixed, it removed the heart btu the others stays on its place.

Hopefully someone can send me on the right direction.

The current code of the first picture:

HTML:

        <div class="hud-status">
            <div class="hud-circle hud-voice"><i id="VoiceIcon" class="fas fa-microphone"></i></div>
            <div class="hud-circle hud-health"><i class="fas fa-heart" style="color: #1fb0b4;"></i></div>
            <div class="hud-circle hud-armor"><i class="fas fa-shield-alt" style="color: #1f47b4;"></i></div>
            <div class="hud-circle hud-hunger"><i class="fas fa-hamburger" style="color: #b44e1f;"></i></div>
            <div class="hud-circle hud-thirst"><i class="fas fa-glass-whiskey" style="color: #008cff;"></i></div>
            <div class="hud-circle hud-stress"><i class="fas fa-brain" style="color: #ff0000;"></i></div>
            <div class="hud-circle hud-air"><i class="fas fa-lungs" style="color: #0083a3;"></i></div>
            <div class="hud-circle hud-nos"><i class="fas fa-meteor" style="color: #b41f51;"></i></div>
            <div class="hud-circle hud-timer"><i class="fas fa-hourglass-half" style="color: #6200ff;"></i></div>
        </div>

CSS:

    .hud-status {
        display: flex;
        position: absolute;
        display: none;
        left: 1.5vh;
        bottom: -4vh;
    }

    .hud-circle > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        color: white;
        font-size: 1.9vh;
    }

    .car-speed-circle {
        position: absolute;
        bottom: 5vh;
        left: 30vh;
        width: 8vh !important;
        height: 8vh !important;
        border-radius: 50%;
    }

    .hud-circle {
        transform: rotate(45deg);
        position: relative;
        width: 4vh !important;
        height: 4vh !important;
        margin: 0.3vh 1vh;
        float: left;
        box-shadow: 1px 1px 5px rgb(0, 0, 0);
    }