How to eliminate gap between Font Awesome Icon and paragraph in React JS?

Question

I am trying to put the top side of the icon caret-down lined up with the bottom side of my p:

There is a gap between the arrow and the p, I don't know how to get rid of this gap. I set p with margin-bottom: 0, but the gap of the image still remains. My second guess was to set the icon with a negative margin-top, but it only works so far:

The image above shows what happens when I set the icon with margin-top: -10px. I am still getting a gap and this is the closest I can get the icon next to p, it doesn't matter how much I decrease the margin-top, this is the limit.

Maybe there is something about these icons that I don't know.

A sample of my code:

JSX:

<div>
   <p onClick={() => setTag('all')} className="products-select products-select-active">ALL PRODUCTS</p>
   <FontAwesomeIcon icon="caret-down" size="2x" />
</div>

css:

.products-select {
    width: 155px;
    height: 46px;
    background-color: #F5F5F5;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 0;
}

.products-select-active {
    background-color: #3A3A3A;
    color: white;
}

Icon:

How can I fix it?

EDIT:

I just made my own arrow-down with css and JSX and it solved my problem.

EDIT 2:

@lt1 solution works great.

Answer 1

When you need to move something around precisely, you can use the transform CSS property with a translate value. For example, here you could try

.products-select {
   transform: translateY(15px);
}

That will move the products-select down by 15px, you can adjust the value to whatever you need. (there's also translateX for a horizontal translation.)