html, body { margin: 0; font-family: Arial, Helvetica, sans-serif; } #container { width: 100%; height: 100vh; background-color: #fcc; } #editor { position: absolute; display: none; border: 1px solid white; opacity: 0.5; width: 0; height: 0; z-index: 100; } #editor.can-draw { opacity: 1; } #editor.show-editor { display: block; } .label { position: absolute; background-color: tomato; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); overflow: hidden; } .label--number { display: inline-block; margin: 0; padding: 0 4px; user-select: none; background-color: white; } .label--close { position: absolute; right: 0; border: none; padding: 0 4px; font-size: 1rem; background: none; color: white; cursor: pointer; } .label--text { margin: 1ch 0; padding: 0 1ch; overflow: hidden; width: 100%; height: 100%; text-overflow: ellipsis; } .text-input { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .text-input button { background: none; border: none; cursor: pointer; }