How to Add Space Between Two Texts in a Mantine Badge Component?

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

Expected 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>

Solution

You can achieve desired output by doing changes as below.

You can check example here -> Example

<Badge
  fullWidth
  variant="light"
  color="gray"
  tt="none"
  h={30}
  sx={{ ".mantine-Badge-inner": { width: "100%" } }}
>
  <Group sx={{ width: "100%", justifyContent: "space-between" }}>
    <GolosText size="16px" c="black" fw={600}>Size:</GolosText> 
    <GolosText size="16px" c="black">L</GolosText>
  </Group>
</Badge>