Wp-calypso: Components: Form Text Input With Affixes don't expand as needed on Safari

[klimeryk]

On Safari (Version 9.1.1 (11601.6.17)), the affixes don't expand to accommodate longer text:

On Chrome (51.0.2683.0), it works correctly:

To test, visit https://wpcalypso.wordpress.com/devdocs/design/form-fields and change the text in the affixes using Developer Tools. In the wild, these types of fields can be seen in the DNS Editor (https://wordpress.com/domains/manage/:site/dns/:domain), where they are used for the domain suffix part.

cc @mtias

[folletto]

It seems both .form-test-input-with-affixes_suffix and .form-test-input-with-affixes_prefix are missing the flex property? A quick liveflex: 1 0 auto; (grow, don't shrink, auto-size) addition seems fixing it.

---

Aside: the font size of prefix/suffix should match the input text box, right now seems bigger.