In the custom component, switch and label are used, and when 'justify-between' is used, the style does not take effect

[sshallow]

Question

I want to divide the child components on both sides, so I use flex items-center justify-between, but it doesn't work, it's still on the left, why?

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function ATMSwitch({ id, label, onChange }) {
    const handleChange = (checked) => {
        if (onChange) {
            onChange(checked);
        }
    };

    return (
        <div className="flex items-center justify-between space-x-2">
            <Label htmlFor={id}>{label}</Label>
            <Switch id={id} onCheckedChange={handleChange} />
        </div>
    );
}

<ATMSwitch id="filter-mode" label="Search Filter" onChange={handleSwitchChange} />

[DenserMeerkat]

Maybe ATMSwitch isn't taking the full width of its parent.
Try adding a w-full in ATMSwitch's div.