Fix TagGroup label alignment (#4102)

Author: reidbarber

packages/@adobe/spectrum-css-temp/components/tags/index.css

@@ -20,6 +20,12 @@ governing permissions and limitations under the License.
   display: inline;
 }
 
+.spectrum-Tags-container {
+  /* Aligns tags with label. */
+  margin-inline-start: calc(calc(var(--spectrum-taggroup-tag-gap-x) / 2) * -1);
+  margin-inline-end: calc(var(--spectrum-taggroup-tag-gap-x) / 2);
+}
+
 .spectrum-Tags-item {
   @inherit: %spectrum-FocusRing;
   --spectrum-focus-ring-border-radius: var(--spectrum-tag-border-radius);

packages/@react-spectrum/tag/src/TagGroup.tsx

@@ -156,6 +156,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
         errorMessageProps={errorMessageProps}
         showErrorIcon
         ref={domRef}
+        elementType="span"
         UNSAFE_className={
           classNames(
             styles,
@@ -166,7 +167,8 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
           )
         }>
         <div
-          ref={containerRef}>
+          ref={containerRef}
+          className={classNames(styles, 'spectrum-Tags-container')}>
           <div
             ref={tagsRef}
             {...tagGroupProps}