Prevent input from changing line height and content width

[Radivarig]

I'd like to create an input that is visually equivalent to a span with different background color, meaning it does not change the line height or is wider than the span with exactly the same text.

This is my attempt, works for the above but is not ideal.

    const style = {
      fontFamily: 'inherit',
      fontSize: 'inherit',
      height: '1em',
      lineHeight: '1em',
      border: '1px',
      borderColor: '#DDF',
      borderStyle: 'solid solid solid none',
      margin: '0px 0px 0px 0px',
      padding: '0px 0px 0.15em 0px',
      minWidth: 30 > width ? 30 : width,
      width: inputText != '' ? inputWidth : width,
      backgroundColor: '#EEF',
      display: 'inline-block',
      whiteSpace: 'nowrap',
    }
...
        <div
          contentEditable
          style={style}
          value={inputText}
          onChange={this.handleOnChange}
          onKeyPress={(e) => {if(e.which == 13) e.preventDefault()}}
        />

Any way to achieve the same with react-input-autosize?

[JedWatson]

Theoretically yes, you could, with the right styles attached.