Stack

link - developer.microsoft.com/en-us/fluentui#/controls/web/stack
A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.
We can control:
Direction: By adding vertical or horizontal properties,
Alignment: using verticalAlign and horizontalAlign` properties,
Spacing: by adding gap and verticleGap properties.

const stackTokens = { 
  childrenGap: 50 
}; 

Defines the spacing between Stack children.
The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
If 'column gap' is omitted, it's set to the same value as 'row gap'.

const stackStyles: Partial<IStackStyles> = { 
  root: { 
    width: 650 
  } 
}; 
const columnProps: Partial<IStackProps> = { 
  tokens: { 
    childrenGap: 15 
  }, 
  styles: { 
    root: { 
      width: 150 
    } 
  } 
}; 

  render(): JSX.Element { 

    return ( 
      <div> 

        <Stack horizontal tokens={stackTokens} styles={stackStyles}> 
          <Stack {...columnProps}> 
            <TextField label="Platform:" readOnly defaultValue="PC" /> 
            <TextField label="Host:" readOnly defaultValue="Word" /> 
            <TextField label="Office API:" readOnly defaultValue="1.3" /> 
            <TextField label="Add-in Version:" readOnly defaultValue="1.0" /> 
          </Stack> 
        </Stack> 

      </div > 
    ) 
  }