div with contenteditable turned on jumps when text is entered - html

Question

I'm stumbling on a problem with some divs that have contenteditable set to true. Whenever i add text into the divs, they jump to a new position. Only when all divs are empty or all are filled with text, they have the same relative position.
You can find a JSfiddle with the code here.
What am i doing wrong?
Here is the code:
.editor_table {
position: relative;
display: table;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.editor_row {
display: table-row;
}
.editor_cell {
display: table-cell;
border: none;
border-spacing: 5px;
width: 22%;
padding: 0px;
}
.editor_onvoldoende {
background: #F00
}
.editor_voldoende {
background: #FF0;
}
.editor_goed {
background: #0F0;
}
.editor_uitstekend {
background: #1B1;
}
.editor_onvoldoendead {
background: #F00
}
.editor_voldoendead {
background: #FF0;
}
.editor_goedad {
background: #0F0;
}
.editor_uitstekendad {
background: #1B1;
}
.editor_subject {
position: relative;
display: table-cell;
border: none;
width: 100px;
padding: 10px;
vertical-align: middle;
}
.editor_subject_input {
position: relative;
width: 100%;
border: none;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_inner_cell {
margin: 5px;
height: 90px;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_textarea {
position: relative;
height: 100%;
width: 100%;
border: none;
}
<div class="editor_table">
<div id="editor_a1" class="editor_row">
<div class="editor_subject">
<h3>
<input type="text" name="editor_subject1" class="editor_subject_input">
</h3>
</div>
<div id="editor_io" class="editor_cell">
<div id="editor_io_content" class="editor_onvoldoendead editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_iv" class="editor_cell">
<div id="editor_iv_content" class="editor_voldoendead editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_ig" class="editor_cell">
<div id="editor_ig_content" class="editor_goedad editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_iu" class="editor_cell">
<div id="editor_iu_content" class="editor_uitstekendad editor_inner_cell" contenteditable="true">
</div>
</div>
</div>
</div>

Answer 1

Replace your css class with below mention: I have added "float:left" and increased your width.
.editor_cell {
display: table-cell;
border: none;
border-spacing: 5px;
width: 24%;
padding: 0px;
float: left;
}

Answer 2

/* ------------------ */
/* CSS for the editor */
/* ------------------ */
.editor_table {
position: relative;
display: flex;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.editor_row {
display: flex;
}
.editor_cell {
border: none;
border-spacing: 5px;
width: 22%;
padding: 0px;
width: 90px;
}
.editor_onvoldoende {
background: #F00
}
.editor_voldoende {
background: #FF0;
}
.editor_goed {
background: #0F0;
}
.editor_uitstekend {
background: #1B1;
}
.editor_onvoldoendead {
background: #F00
}
.editor_voldoendead {
background: #FF0;
}
.editor_goedad {
background: #0F0;
}
.editor_uitstekendad {
background: #1B1;
}
.editor_subject {
position: relative;
border: none;
width: 100px;
padding: 10px;
vertical-align: middle;
}
.editor_subject_input {
position: relative;
width: 100%;
border: none;
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.05),0px 0px 10px 0px rgba(0,0,0,0.1);
}
.editor_inner_cell {
margin: 4px;
height: 90px;
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.05),0px 0px 10px 0px rgba(0,0,0,0.1);
}
.editor_textarea {
position: relative;
height: 100%;
width: 100%;
border: none;
}
<div class="editor_table">
<div id="editor_a1" class="editor_row">
<div class="editor_subject">
<h3>
<input type="text" name="editor_subject1" class="editor_subject_input">
</h3>
</div>
<div id="editor_io" class="editor_cell">
<div id="editor_io_content" class="editor_onvoldoendead editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_iv" class="editor_cell">
<div id="editor_iv_content" class="editor_voldoendead editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_ig" class="editor_cell">
<div id="editor_ig_content" class="editor_goedad editor_inner_cell" contenteditable="true">
</div>
</div>
<div id="editor_iu" class="editor_cell">
<div id="editor_iu_content" class="editor_uitstekendad editor_inner_cell" contenteditable="true">
</div>
</div>
</div>
</div>
If you are able to make the switch, I would strongly recommend display: flexto solve this problem.