On the left side, there is dynamic text and on the right side, a button is displayed as shown below:
<div class="dynamic-text">
{{ dynamicText }}
</div>
<div class="some-button">
<cv-button
id="some-btn"
kind="tertiary"
size="default"
:icon="someIcon"
@click="someBtnFunction"
>
{{ someBtnLabel }}
</cv-button>
</div>
A specific style is applied to it:
.some-button {
float: right !important;
padding-bottom: 2rem;
}
The current issue observed is that when the window is narrowed, the button moves under the text and is still aligned to the right side. The requirement is that when the text and button are on the same line, the button should align to the right, but when the button is below the text, it should be left-aligned. Since the text's length varies dynamically, the button's position changes at different browser widths based on the text content.
Do you have any suggestions or ideas on how to achieve this behavior?
It is important to note that Carbon and Vue are being used for development. Thank you in advance!