aligning text and buttons in flex div CSS-CodePudding

I am trying to align Text on the left and button controls on right in 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 to what I got so far.

below is the CSS for all the above reactjs elements.

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;
`;

this makes

what I am trying to achieve is very simple, as below

any help would be tremendous, the basic idea is to main a container to have 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.

CodePudding user response：

Your StyledWellContainer styles need changing such that:

  flex: 1 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

Currently it is a column, which is why the button appears below rather than by the side.

By adding row, this fixes that. flex: 1 0 tells it to stretch to fit the parent, and align-items: flex-start; will prevent the content of the button being stretched to height.

You also need to let the button be its base size and not tell it to grow:


const DeleteButton = styled(Button)`
  flex: 0 0 auto;
  margin-right: 0;
  margin-left: auto;
`;

CodePudding user response：

StyledWellContainer needs to be the flex container, not CustomFieldContainer

const StyledWellContainer = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
`;

const FieldDetails = styled.div`
  display: flex;
  flex: 2;
  flex-direction: column;
  height: 100%;
  border: none;
`;

const DeleteButton = styled(Button)`
  flex: 1;
  margin-right: 0;
  margin-left:auto;
  display:block;
`;