Flex box

I'm using two <select></select> inputs in my form. Normal on bigger screens I want them to be 50 50 with gap in between. And than wrap to if there is no space with the width of 100%.I'm using flex-box on them. I've tried using min-width:50%; on both <selection></selection>.
Problem:
-main one is due to using 50% i can not add gap.
-after wrapping they still don't get width:100%; (picture is included)
What do you think I'm doing wrong and could be a better solution.
Codepen:
https://codepen.io/Arslan-Akbar/pen/BaqKzyw
This is what I did in css.
.two_selectors{ display:flex; flex-wrap:wrap; } .selector_wrapper{ min-width:50%; }
after_wrap.PNG
50_50_selectors.PNG
Was this page helpful?