I tried to make this challenge as accessible as possible, I had some inconveniences, because I wanted to make the results automatic as the data was entered, I avoided as much as possible the excessive use of html tags, making use of grid, your comments and suggestions are welcome.
Nice work overall! You did a great job recreating the design.
I didn't dig into the actual code, but a couple notes I have just previewing/inspecting/using:
I have one tip on using borders for hover/focus states. Right now you'll notice when you hover/focus, the addition of the border resizes the input slightly. One trick to avoid that awkward resize is to set the default style to 1px solid transparent.
The "Can't be negative" feedback immediately popping up when you first try to change the value is a little confusing. Ideally, that feedback would appear on blur if I've failed to enter a positive number.
Another thing I would also advise is to avoid using background images when that image contains text. It would be great here to have an <h1> with "Splitter" as the text - even if it's screen reader only! Or alternatively, using an actual <img> element with alt text.
