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.


I’d be interested in suggestions.