semantic-ui-react - form input placeholder position

Question

I'm using the components from semantic-ui-react to display a Field and Button like below:

<Segment clearing>
    <Form>
        <Form.Group style={{ display: "flex" }}>
            <Form.Field style={{ flexGrow: "1" }}>
                <Form.Input
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    focus
                />
            </Form.Field>

            <Form.Button
                    color="green"
                    floated="right"
                    content="Add new API key"
                    type='submit'
            />
        </Form.Group>
    </Form>
</Segment>  

Nothing incredibly fancy, the result is as below:

I want to reposition the placeholder in the Form.Input to the right side like below:

How exactly can I achieve this?

Answer 1

I would use the CSS placeholder selector. You could, for example, give the Form.Input component an arbitrary class such as "input-aligned-end" and then style it in CSS:

.input-aligned-end::placeholder {
  text-align: end;
}