When using Material-UI's standard grid system, the alignment of a new grid item after all 12 "space units" are utilized is based on the longest element within those 12 "space units". Is there a way to disrupt this type of alignment? If you take a look at this codesandbox example, you'll see what I'm referring to - my goal is for the last box to be positioned directly below the first left box, instead of being aligned with the longest item (in this case, the right box).
Edit: It's important to note that the order of the boxes cannot be changed. This code snippet is simplified from the real implementation. Reordering the boxes impacts the tab key sequence, but I want the tab key navigation to go from Box1 to Box2 (each Box contains different input fields).