Absolutely positioned tailwind element for right: 0 is not working

I have a red input which is absolutely positioned in the gray div below (attached image). I'm a little confused as to why right-2 isn't working as I'm wanting it to obviously be contained inside the box. Any help would be great. Thanks

<div className="grid grid-cols-7 gap-0 h-full mx-2">
                        <div className="cursor-pointer border-gray-200 bg-gray-100 h-full">
                            <span className="text-sm mb-0">Single or Couple</span>
                            <div className="text-lg -mt-1">Single</div>
                        </div>
                        <div className="relative border-r border-gray-200 bg-gray-200 h-full">
                            <input
                                id="salary"
                                name="salary"
                                className="peer text-xl absolute left-2 right-2 top-5 rounded-md bg-red-200"
                                placeholder="Salary"
                                type="number"
                            />
                            <label
                                htmlFor="salary"
                                className="absolute left-2 top-0 bg-green-100"
                            >
                                Salary
                            </label>
                        </div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <div>Test</div>
                        <button>Go!</button>
                    </div>