JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div style="order: 1">Element 1A</div>
    <div style="order: 2">Element 2B</div>
    <div style="order: 3">Element 3C</div>
    <div style="order: 4">Element 4D</div>
    <div style="order: 5">Element 5E</div>
</div>
Hover over the boxes to see the animation.

CSS

#container {
    display: flex;
}
#container div {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-color: red;    
}

#container div:last-child {
    background-color: blue;
}

#container:hover div:last-child {
    transition: order 3s;
    order: -1 !important;
    background-color: green;
}