React: Useful Flexbox snippets

How to align label and icon using Semantic UI React, React-less:

<div styleName="header-container">
        <Header as='h3' styleName="title-container">Status: </Header>
        <Icon name="cloud upload" size='large' color='green' />
</div>

CSS:

  .header-container {
    display: flex;

    .title-container {
      padding-right: 5px;
  }}

How to center a title and add an icon at the end of a header bar:

 <Card.Header textAlign="center" styleName="hc-card-header">
       <div styleName="header-container">
            <div styleName="title-container">{name}</div>
             <div styleName="icon-container">
                   <Icon name="cloud upload" size='large' color='green' />
              </div>
        </div> 
 </Card.Header>

CSS:

  .header-container {
      display: flex;

      .title-container{
          display: flex;
          flex-direction: row-reverse;
          flex: auto;
      }

      .icon-container {
        display: flex;
        flex-direction: row-reverse;
        flex: auto;
      }
    }