I've currently got a button module, which, based on an array it is given, generates a button with an Image, and Text. However, now that i started adding translations to the buttons, I noticed that some translations for more complex words, are overflowing out of the button, at an inconsistent way.

The bottom left is the standard/default text in English. There is some inconsistency that I've yet to sort out, but it's all style from my understand. I am still learning how styling buttons works.

All the other buttons show what happens when a different language is presented/selected/used. The buttons update the text when language is updated, so they are dynamically refreshed with new text.

Each button is generated like this:

return <button
         key={buttonName}
         disabled={disabledStatus}
         style={this.props.buttonStyle}
         onClick={this.handleButtonClick.bind(this, buttonLowerCase)
       >
         <img src={...} alt={buttonName}
         />
         <span style={spacer}/> || This is just {width: '5px'} for seperation||
         {buttonText}
       </button>;

buttonStyle is passed down with following parameters from the module:

{
    width: '100px',
    margin: '5px',
    height: '38px',
    display: 'flex',
    alignItems: "center",
    justifyContent: "left",
};

what are possible solutions to this? Keeping in mind, that the buttons cannot grow to be a bigger size than they are currently. I also do notice that spacer does not seem to be respected, if text is larger than given space, now that I look at it, but have no better solution for forming a bit of space from the text at this point.