I have created this component in App.js as a sample, which includes a wrapper form-control__container, a <Textfield /> and a suffix wrapper for the buttons. Okay, the number of buttons is not always two, it can change depending where the component would be used. And this is where the problem comes. Considering the dynamic number of buttons, how can I determine the width of the input, so that when the input text is too long, it won't overlap with the buttons? Or, in this case, I believe a good idea would be to add padding-right instead of giving the input a width which would require some more customization afterwards.