I'm trying to design an element that is usually just a div displaying text, but which becomes an editable text input when clicked. However, when I put a row of these together, any that are displaying the input get pushed below the level of the others for some reason.
I created a minimal example of this on codepen: http://codepen.io/anon/pen/XjZNdZ
In the interest of simplicity I removed the interactivity and just showed an example of the situation I want to avoid: the middle div should not be pushed below the level of the other two divs.
border: 2px solid black;
Inline block renders differently with no content, try adding
or use float
// display:inline-block; float:left;
Or you can try to use flexboxes.