Flexbox form styling but one thing evading me

I have a flexbox example I’m happy with but I wanted to adjust the layout at wider viewports so that two inputs can appear horizontally to make better use of the space. Now that I can do with Flex: 1 1 50% but I’m unsure how to get a margin between each without having to add just a margin-right to every .form__field that is on the left:-/

Codepen shows my example. the flex: 1 1 50% kicks in at >900px viewport.

https://codepen.io/stevegibbings/pen/KLEGEd

I’d be interested in suggestions.

Thanks,

SiK