How to animate the width of an inline element?

Question

css

Here is the snippet. When the button is pressed, the first element becomes the full width of the parent, the remaining elements go to the second line. This is the required behavior. You need to add a width change animation. Without the use of js, provided that we do not know the initial width of the element, since it will always be according to the content inside. Styles can be perverted as you like, just to achieve the result.

Answer 1

span {
display: inline-block;
margin: 3px
padding: 5px
background: blue
transition: all ease-in-out 1s;
min-width: 10px
width: auto;
}
span.active {
min-width: 100%;
}
and it will work

Answer 2

You need to add a width change animation. Without the use of js, provided that we do not know the initial width of the element.

CSS animations do not work with auto property values. Animations need finite values, not unknowns. Alas, but it is necessary to do on js.