Subscription Block: Poor responsive behavior

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Add a subscription block.
2. Enable the Mobile preview.
3. Depending on your theme, the block may appear broken by default (as noted in https://github.com/Automattic/jetpack/issues/22693#issuecomment-1051369890)
4. Adjust various settings: font size, spacing, etc.
5. Note that the block often appears broken: Its text often appears cut off, or is wrapping oddly, and the button size doesn't line up with the form field size.

### A clear and concise description of what you expected to happen.

The block should take steps to ensure that it always appears usable on mobile. Some suggestions:

- Automatically push the button onto a new line when its text won't fit, or when the form field text becomes too narrow.
- If the button text does need to wrap (and thus result in a taller button), have the form field height scale to match.
- Automatically push the button onto a new line on mobile when its width is set to 100% (https://github.com/Automattic/jetpack/issues/20643).

### What actually happened

_No response_

### Other information

These issues appear in the front-end as well.

I tested with Twenty Twenty-Two for the video here, but this issue persists in every block theme I've tried.

https://user-images.githubusercontent.com/1202812/158609948-563778c5-89cf-49aa-b989-419f56bcd71c.mp4

### Operating System

macOS

### OS Version

12.2.1

### Browser

Chrome/Chromium, Firefox, Safari

### Browser Version(s)

_No response_

Start with the Jetpack Subscription block in the editor's Mobile preview, testing it with Twenty Twenty-Two and other block themes in Chrome, Firefox, and Safari. Compare editor and front-end behavior at different font, spacing, field-width, and button-width settings; done means the text remains visible and the button and form field align or stack cleanly on mobile.

Written by the indexing model from the issue text.