javascript animation not working properly

I’m making a voting system, and I want the option with the most votes rank at the top with a switching animation but I don’t know how to do so.

function updateResults() {
    for (let option in votes) {
        let percentage = (votes[option] / totalVotes) * 100 || 0;
        document.getElementById(option.toLowerCase().replace(' ', '')).style.width = percentage + '%';
        document.getElementById(`${option.toLowerCase().replace(' ', '')}-percentage`).innerText = Math.round(percentage) + '%';
    }
}

JSFiddle

please provide a simple explanation of how the switch up animation and the ranking change is applied.

I tried messing around with the animation but never got the result I wanted. I managed to get the option with the most votes to go to the top but it always ended up teleporting