jumping content in inline editor

Question

I am trying to create a simple inline editor widget. What I want is moving to edit mode waswithout being forced to jump text. Here is a fiddle example. When we click on text it will move to edit mode but content 'test' will jump even when it is set to the same padding and margin in both edit and display mode.

CSS:

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid transparent;
  display: block;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  border: 1px solid #efefef;
  display: block;
  font-size: 14px;
  line-height: 1.428;
}

Answer 1

you should add font and width.

here it doesn't jump anymore: http://jsfiddle.net/28us9efd/4/

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid red;
  display: block;
  width: 100%;
  font-family: arial;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  width: 100%;
  border: 1px solid green;
  display: block;
  font-family: arial;
  font-size: 14px;
  line-height: 1.428;
}