Note that when placing multiple focusable elements directly next to each other, the focus rings of earlier elements may show under succeeding elements, thus become invisible.
To fix this, you should use a focus:z-1 class on the focusable elements while adding the relative z-0 classes to a shared ancestor of them.
The focus:z-1 class will make sure whatever is focused is always above their siblings, while the relative z-0 classes create a stacking context to make sure the focused element will not overlay other elements on the page, for example a dropdown menu might otherwise show under the input field which we don't want.
When you place two elements next to each other which both have borders, you may want to merge them. The best way to do that is by adding the -ml-1 class to the succeeding element(s). That way, those elements will be pushed by 1px to the left, overlaying the right border of their left siblings.