I have a group of form inputs that are displayed on a single line on larger viewports and collapses to a multi-line display on smaller viewports. On the single line display I want a cancel button at the end of the line, but on the multi-line display I want it at the end of the first line, and I want the ends of both lines to be flush with each other.
I can do this by having two cancel buttons and conditionally displaying each based on a media query, as my snippet below shows, but it would be better to only have one button and shift its position based on the media query. Is there a way to do that in an example like mine by leveraging flexbox instead of using multiple cancel buttons? It seems like something that should be possible, but I can't imagine exactly how to do it.
* { box-sizing: border-box; } input[name="qty"] { width: 36px; } input[name="unit"] { width: 192px; } button { width: 72px; } input[name="item"] { width: 300px; } .group-2 button { display: none; } @media screen and (min-width: 700px) { fieldset { display: flex; } .group-1 button { display: none; } .group-2 button { display: inline; } }<fieldset><div class="group-1"><input type="text" name="qty" placeholder="qty" /><input type="text" name="unit" placeholder="unit" /><button type="button">CANCEL</button></div><div class="group-2"><input type="text" name="item" placeholder="item" /><button type="button"> CANCEL</button></div></fieldset>