reactjs - How to make the asterisk(*) in <TextValidator> float to right?

Question

I'm using TextValidator from 'react-material-ui-form-validator' and Grid from '@material-ui/core/Grid' and I have multiple fields to compress in a single row.

ReactJS UI - TextValidator

I know I can shorten the label description to solve my problem, however I can't.

                <Grid item xs={12} sm={1}>
                    <TextValidator
                        required
                        id="AbcdefKey"                
                        name="AbcdefKey"
                        validators={['required', 'isPositive']}
                        errorMessages={['this field is required','Must be numeric and greater than zero']}                
                        fullWidth
                        value="1111"          
                        label="AbcdefKey"
                    />  
                </Grid>

question from:https://stackoverflow.com/questions/65599083/how-to-make-the-asterisk-in-textvalidator-float-to-right

Answer 1

Waitting for answers