[Header] non-floated header doesn't align with floated header

[theigor]

Steps

Given the following snippet:

<div class="ui grid">
  <div class="row">
    <div class="eight wide column">
      <div class="ui header">Regular</div>
      <img src="/assets/images/wireframe/paragraph.png" class="ui image">
    </div>
    <div class="eight wide column">
      <div class="ui left floated header">Floated</div>
      <img src="/assets/images/wireframe/paragraph.png" class="ui image">
    </div>
  </div>
</div>

or this if you want to use the react-semantic docs:

import React from 'react'
import { Grid, Image, Header } from 'semantic-ui-react'

const GridExampleRows = () => (
  <Grid>
    <Grid.Row>
      <Grid.Column width={8}>
        <Header>Regular</Header>
        <Image src='/assets/images/wireframe/paragraph.png' />
      </Grid.Column>
      <Grid.Column width={8}>
        <Header floated="left">Floated</Header>
        <Image src='/assets/images/wireframe/paragraph.png' />
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExampleRows

The headers don't align.

Expected Result

The two sides should look identical in terms of alignment

Actual Result

Version

react semantic 0.80.2 which uses semantic-ui 2.2.12

Testcase

see above easy way to test in react-semantic

[y0hami]

Can you create a CodeSandbox to replicate the issue?