traintocode

Adding Some CSS Styles

Next, add some CSS styles to the <form> component and <img> result. You will want to use a flexbox layout to allow the <input> and <button> components to be placed in a row. The <input> element should also stretch to fill the remaining width.

The <img/> result can also be displayed using FlexBox to automatically resize the generated image to the parent width

Exercise

1. Add a class "request-form" to the form and "generated-image" to the image tag.

2. Set the <form> to be a flex container and set the text input to grow to fill the remaining width.

To find out more about flexbox, or anything else you need to know, ask me here:

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

App.css

⋮