How to align two items next to each other in Semantic UI?

Question

I'm trying to make a Headerelement sit next to an Button icon but I cannot make it happen.

Without attempting any Grids listing them like this

<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
   <Icon name='add'/>
</Button>

makes it look like this - each item on different line:

If I try to make a Grid with one row and two columns there is a massive space between the two and also the header text is wrapped. At least is vertically aligned I guess...

<Grid>
  <Grid.Row verticalAlign='middle'>
    <Grid.Column>
      <Header as='h4'>Header text</Header>
    </Grid.Column>
    <Grid.Column>
      <Button icon className='transparentButton'>
                      <Icon name='add'/>
                    </Button>
    </Grid.Column>
  </Grid.Row>
</Grid>

This looks like that:

I'd really love to hear how suggestions on how to make the two items sit next to each other properly. I want to make it look like this:

Example code https://codesandbox.io/s/semantic-ui-react-example-ttnxc (not sure why the Icon is not rendering there though).

Kareem Dabbeet Kareem Dabbeet · Accepted Answer · 2019-06-14T18:59:57

Actually I think that Header Component is displaying as block

Just try to edit it's css and make:

display: inline-block;

and it should render successfully

unfortunately your example code didn't load so i couldn't try this but it should work

How to align two items next to each other in Semantic UI?

1 Answers