0

Im working on this layout, this is the design enter image description here

But i just cant align the checkboxes like the design so mine looks like this enter image description here

Here is the code so you can tell me what im doing wrong and what should i actually do...

  line,
}) {
  return (
    <Row
      width="35em"
    >
      <Text
        color="#73737D"
        fontSize="14px"
      >
        {line}

      </Text>
      <Box
        marginLeft="5em"
        display="flex"
        flexDirection="row"
        justifyContent="center"
        alignItems="center"
        width="2em"
      >
        <CheckBox />
      </Box>
    </Row>
  );
}```

Thanks a lot for your help!
Tomas Gil Amoedo
  • 537
  • 3
  • 16
  • You can achieve this using 'flexbox' , check this link for more details : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , also, the answer on the following question might help you too https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container. – Ali Mar 02 '22 at 21:12

1 Answers1

2

You could just use some flexbox style:

<Row width="35em" style={{ display: 'flex', justifyContent: 'space-between' }}>
  ...
  <Box>
    <CheckBox />
  </Box>
</Row>
Michele Da Rin
  • 287
  • 4
  • 14