Review this generated checkout action row before release.
Lay out a shrinkable order summary beside a content-sized payment button while preserving source and focus order on narrow screens.
HTML
<div class="checkout">
<p class="summary">Total for account-with-a-long-name: $48</p>
<button class="pay">Pay now</button>
</div>
<style>
.checkout {
display: flex;
gap: 1rem;
align-items: center;
}
.summary {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: inline-size 200ms;
}
.pay {
order: -1;
flex: 1;
}
@media (max-width: 30rem) { .checkout { flex-direction: row-reverse; } }
</style>
generated code is illustrative, not from any one model