text: <>
    <div className="u-flex u-alignItemsStart b-highlight u-marginBottomSmall" style={{ height: 100 }}>
      <div className="u-paddingExtraSmall b-highlight">Flex item 1</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 2</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 3</div>
    </div>
    <div className="u-flex u-alignItemsEnd b-highlight u-marginBottomSmall" style={{ height: 100 }}>
      <div className="u-paddingExtraSmall b-highlight">Flex item 1</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 2</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 3</div>
    </div>
    <div className="u-flex u-alignItemsCenter b-highlight u-marginBottomSmall" style={{ height: 100 }}>
      <div className="u-paddingExtraSmall b-highlight">Flex item 1</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 2</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 3</div>
    </div>
    <div className="u-flex u-alignItemsBetween b-highlight u-marginBottomSmall" style={{ height: 100 }}>
      <div className="u-paddingExtraSmall b-highlight">Flex item 1</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 2</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 3</div>
    </div>
    <div className="u-flex u-alignItemsAround b-highlight u-marginBottomSmall" style={{ height: 100 }}>
      <div className="u-paddingExtraSmall b-highlight">Flex item 1</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 2</div>
      <div className="u-paddingExtraSmall b-highlight">Flex item 3</div>
    </div>
  </>;
  