Hey guys,
I am tired, I have spent 3 days just trying to fix my HTML & CSS design in order to make just one dropdown !! to work the same way in both Chrome and Firefox.
this is my first time in 4 years of web development to encounter that. I had problems before on adjusting inline elements but I was able to fix it, meanwhile I didn't know that it's related to white space.

I didn't know that the white space is a big issue and has a buggy history in CSS, I recommend you to google about it because if you don't encounter this, then you are not going to know that exist.

This is the Design I have been working on:
(The issue is about the dropdowns which are floated to right)
https://drive.google.com/file/d/1c01pTVUWW_yFA_-L4mC2BYGYFZdqFhJR/view?usp=sharing

Read this, it's helpful:
1- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
2- https://patrickbrosset.com/articles/2016-10-21-when-does-white-space-matter-in-HTML.html

Edit:

I forget to say that I didn't fix it yet, I am about to try some solutions and post it here. if you think you have a solution rather than

white-space: nowrap;

post it here, I will be thankful ^_^.