InlineStack is used to lay out a horizontal row of elements

---
### Example
![inlinestack](/assets/api/checkout-extensions/post-purchase/components/inlinestack.png)
```ts?title: "JS"

import {extend, InlineStack, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const inlineStack = root.createComponent(
    InlineStack,
    {
      spacing: 'base',
    },
    [
      root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
      root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
      root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    ],
  );

  root.appendChild(inlineStack);
});


```

```tsx?title: "React"

import {render, InlineStack, View} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <InlineStack spacing="base">
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
    </InlineStack>
  );
}


```



## Props
optional = ?

| Name | Type | Description |
| --- | --- | --- |
| alignment? | <code>"leading" &#124; "center" &#124; "trailing"</code> | Position children along the cross axis  |
| spacing? | <code>"xtight" &#124; "tight" &#124; "loose" &#124; "xloose"</code> | Adjust spacing between children  |