Tengo un formulario de muestra justo debajo de una mesa. Como abajo

Quiero estirar el campo del formulario con la misma longitud que la tabla y quiero alinear los elementos del formulario horizontalmente.

mi CSS es:

 .buttonFooter { background-color: gray; align-items: center; flex-direction: row; display: inline-block; }

Y el código es:

 <Card className='buttonFooter'> <Form className='buttonFooter'> <input type="text" class="form-control" placeholder="First Name" value={firstName}></input> <input type="text" class="form-control" placeholder="Last Name" value={lastName}></input> <Button>Add New Customer</Button> </Form> </Card>

Si elimino la etiqueta del formulario y solo uso css.class para la tarjeta, entonces funciona (alineación horizontal), pero necesito usar un formulario para obtener el valor del cuadro de entrada y enviarlo a un método con un clic de botón. ¿Cómo puedo alinearlos horizontalmente y agrandarlos con el mismo tamaño con la mesa?