I'm attempting to align text on the left and button controls on the right within a display: flex div.
<CustomFieldContainer>
<StyledWellContainer>
<FieldDetails key={id}>
<H4 bold>{label}</H4>
<StyledBody>({capitalizeFirst(type)}) {required && <StyledSpan>REQUIRED</StyledSpan>} </StyledBody>
</FieldDetails>
<DeleteAction {...props} />
</StyledWellContainer>
</CustomFieldContainer>
This is what I have achieved so far.
Below is the CSS for all the ReactJS elements mentioned above.
const CustomFieldContainer = styled.div`
display: flex;
flex-direction: row;
`;
const FieldDetails = styled.div`
display: flex;
flex-direction: column;
border: none;
`;
const DeleteButton = styled(Button)`
flex-basis:33.33%;
margin-right: 0;
margin-left:auto;
display:block;
`;
With this setup,
https://i.stack.imgur.com/mjfkF.png
The goal is simple, as shown below:
https://i.stack.imgur.com/Yk958.png
Any assistance would be greatly appreciated. The main idea is to have a container with texts on the left and controls on the right. Thank you.
Update:
const StyledWellContainer = styled(WellContainer)`
margin-right: 1rem;
width: 100%;
padding-bottom: 2px;
padding-top: 0;
`;
import styled from 'styled-components';
const WellContainer = styled.div`
display: flex;
flex-direction: column;
padding: 1rem;
border: ${({ theme, borderType }) => (borderType === 'attention' ? theme.color.border.negative : theme.color.border.light)};
border-radius: 12px;
& > * {
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: ${({ theme, disableDivider }) => (disableDivider ? 'none' : theme.color.border.light)};
}
& > :last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
`;
export default WellContainer;
Update after changes, advised by Adam.