You can try playing around with this CPP html <div class="wrapper"> <label class="title-text autoexpand"> <input type="text" name="attr_foo" /> <span>Foo</span> <span class="autoexpand" name="attr_foo"></span> </label> <br> <label class="title-text autoexpand"> <textarea name="attr_foo1"></textarea> <span>Foo1</span> <span class="autoexpand" name="attr_foo1"></span> </label> </div> css .sheet-wrapper { width: 100%; background-color:beige; } input[type="text"], textarea { width: 100%; min-width: 40px; } .sheet-title-text.sheet-autoexpand { width: auto; min-width: 40px; max-width: 99%; } .sheet-title-text.sheet-autoexpand input, .sheet-title-text.sheet-autoexpand textarea { position:absolute; overflow:hidden; } .sheet-title-text.sheet-autoexpand textarea { width: calc(100% - 10px); } .sheet-title-text.sheet-autoexpand span.sheet-autoexpand { visibility: hidden; width: 100%; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; display: block; z-index: -1; height: 1em; overflow: hidden; margin-top: -1em; font-size: 1em; } .sheet-title-text > input:not([class="*"]), .sheet-title-text > textarea:not([class="*"]) { display: block; padding: 5px; position: relative; font-size: 1em; } .sheet-title-text.sheet-autoexpand span:not(.sheet-autoexpand) { white-space: nowrap; } .sheet-title-text { display: inline-block; text-align: center; position: relative; }