Tag component: misalignment when a mix of tags with and without icons are used

[holmansze]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

I got an issue on the newly added prop renderIcon in the Tag React component. I am rendering a wrappable list of tags, that has a mix of tags with and without renderIcon. It renders okay, except there is a misalignment issue. The tags without renderIcon got pushed down a little bit.

Steps to reproduce the issue

Here's an example:

    <Tag key="tag1" type="gray">
      tag1
    </Tag>
    <Tag key="tag2" type="gray" renderIcon={Warning16}>
      tag2
    </Tag>
    <Tag key="tag3" type="gray">
      tag3
    </Tag>

CodeSandbox:
https://codesandbox.io/s/bold-brook-2cq7e?file=/src/index.js