Cross-browser font height

[Rain Lover]

As you see the outline is collapsed in the following sample:

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});

output {
  display: block;
  font: 20px Arial;
  outline: 1px solid green;
}

<input id="input">
<output id="output"></output>

DEMO

How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height — not an arbitrary number? Is there a cross-browser solution?

[molendijk]

HTML:

<output id="output">&nbsp;</output>

[mitza.dragan]

To prevent the output box do disappear when delete everything using backspace update the css with :

output {
display: block;
font: 20px Arial;
outline: 1px solid green;
min-height: 27px;
}

and also don't need the

<output id="output">&nbsp;</output>

you cand use:

<output id="output"></output>

Hope that is what you needed.