Как добавить пробел между двумя текстами в компоненте значка Mantine?

Для написания компонентов я использую Mantine UI + Talwind CSS.

Я пытаюсь добавить пространство между двумя текстами в компоненте Badge, чтобы один текст был выровнен по левому краю, а другой по правому. Вот мой текущий код:

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

Однако оба текста выровнены рядом друг с другом. Я хочу, чтобы «Размер:» находился в крайнем левом углу, а «L» в крайнем правом углу значка.

Мой значок

Ожидаемый результат

Я пытался использовать

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

между текстами

Кроме того, я использовал элемент Space из Mantine Core, но он не дает достаточного заполнения.

Я использовал жестко закодированный элемент «Ширина для пространства», и это частично решает мою проблему, но не делает пространство отзывчивым, что приводит к ошибкам в пользовательском интерфейсе.

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