When it comes to CSS, I must admit that it's not my strong suit. My current challenge is to create two boxes or divs where one remains fixed in the center of the page, while the other adapts and positions itself right next to the first one. Essentially, I want to construct a textField at the center of the page (the first div) and position a loading spinner (as the second div) next to the textField.
I've been experimenting with achieving this using styled-components:
<StyledBox>
<StyledTextFieldContainer>
<TextField/>
</StyledTextFieldContainer>
<StyledLoaderContainer>
Loading...
</StyledLoaderContainer>
</StyledBox>
const StyledBox = styled(Box)`
width: 90%;
justify-content: center;
align-items: center;
display: flex;
`;
const StyledTextFieldContainer = styled(Box)`
width: 70%
display: flex;
align-items: flex-end;
`;
const StyledLoaderContainer = styled(Box)`
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
`;
The issue I'm facing is that my textField isn't perfectly centered because the Loader seems to be pushing it slightly to the left (I suspect this happens because both elements are centered).
Here's a CodeSandBox link for reference: https://codesandbox.io/s/weathered-tree-r4tdm?file=/src/App.js
Any suggestions on how I can keep the textField fixed in the center of the page with the Loader positioned right next to it?