I use Mantine UI + Talwind CSS to write Components.

I’m trying to add space between two texts in a Badge component so that one text is aligned to the left and the other to the right. Here is my current code:

<div>
<Stack>
 <Badge fullWidth variant="light" color="gray" tt="none" h={30} style={{ display: 'flex',    justifyContent: 'space-between', alignItems: 'center' }}>
   <Group>
        <GolosText size="16px" c="black" fw={600}>Size:</GolosText> 
        <GolosText size="16px" c="black">L</GolosText>
   </Group>
 </Badge>
</Stack>
</div>

However, both texts are aligned next to each other. I want “Size:” to be on the leftmost side and “L” on the rightmost side of the Badge.

My badge

Excepted result

I tried to use

 <div style={{ flexGrow: 1 }} /> and <div style = {{flex:1}}/> 

between texts

Also, I used Space element from Mantine Core, but it does not give enough padding.

I used hardcoded Width for Space element, and it partly solves my problem, but it does not make the space responsive, leading to buggy UI

<GolosText size="16px" c="black" fw={600}>Size:</GolosText>
        <Space w="930px" /> 
 <GolosText size="16px" c="black">L</GolosText>