Need help making my component accesible

This is probably a very specific issue.

​

I have created a simple segmented input component, using the not so accessible technique of having multiple input components next to each other. I know it's bad, but doing it the [rci](https://github.com/leonardodino/rci) is more difficult and limiting, but now I want to make it more accessible. My approach is to make a second input element next to it, hide it with css, and make screen readers think it's the actual input field. However, I don't really know how. So, what aria attributes and what not can I give to to trick screen readers into not seeing the div and only the input and is it even doable? Here's is the general DOM structure of my component

​

<div> <input> <input> <input> <input> </div> <!-- Top is regular users, bottom is screan readers --> <input>

Thank you webdev community for your help