In my layout, I have a container that consists of text on the left and a button on the right. The challenge I'm facing is ensuring proper alignment when they are on the same line versus when the button wraps to a new line on smaller screens. Ideally, I would like to apply a style such as justify-content: space-between for inline alignment, but switch to centering the button when it moves to a new line. The catch is that I want this behavior to be dynamic and not rely solely on media queries due to variations in button sizes based on different locales.
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}