Strange span behaviour

EditableTitle.tsx

import * as React from 'react'
import styled from 'styled-components'

const Container = styled.div<{ light?: boolean }>`
  display: inline-block;
  /* when using inline-block and overflow: hidden the text rises unless using v align bottom */
  vertical-align: bottom;
  margin-left: 8px;
  font-size: 18px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${props => (props.light ? 'var(--black)' : '#fff')};
`

const Title = styled.span`
  font-weight: 300;
  cursor: pointer;
  /* makes things look weird on small screen */
  /* white-space: nowrap; */
`

const TitleEdit = styled.input`
  font-family: Exo;
  font-size: 18px;
  color: var(--light-grey-blue);
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  width: 350px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  ::placeholder {
    color: var(--light-grey-blue);
    opacity: 1; /* Firefox */
  }
`

export interface EditableTitleProps {
  title?: string
  updateTitle: (title: string) => void
  readOnly: boolean
  containerClass?: string
  placeholder?: string
  light?: boolean
  preText?: string
}

interface State {
  editting: boolean
}

export default class EditableTitle extends React.Component<EditableTitleProps, State> {
  state = {
    editting: false,
  }

  titleEdit: React.RefObject<HTMLInputElement> = React.createRef()

  private updateTitle() {
    if (this.state.editting) {
      this.props.updateTitle(this.titleEdit.current!.value)
      this.toggleEditting()
    }
  }

  private onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.charCode === 13) this.updateTitle()
  }

  private onBlur = () => this.updateTitle()

  private toggleEditting = () => {
    if (this.props.readOnly) return

    this.setState((state: State) => ({
      editting: !state.editting,
    }))
  }

  public render() {
    return (
      <Container className={this.props.containerClass} light={this.props.light}>
        <div>
          {this.props.preText && <span>{this.props.preText}: </span>}
          {this.state.editting ? (
            <TitleEdit
              ref={this.titleEdit}
              placeholder={this.props.title}
              onKeyPress={this.onKeyPress}
              onBlur={this.onBlur}
              defaultValue={this.props.title}
              autoFocus
            />
          ) : (
            <Title onClick={this.toggleEditting}>{this.props.title}</Title>
          )}
        </div>
      </Container>
    )
  }
}