I have a tab with a title. I would like it to become editable when the user double clicks on it. Currently, I hide the div containing the title and replace it by adding an input element dynamically. However, when I add the input element dynamically, the size of the header-wrapper div increases. I want the dynamically added input to take the same size as the hidden title element. Additionally, I want the size of the wrapper div to remain consistent. I attempted a solution using JavaScript, but now I am seeking a method that solely relies on CSS. Is it possible to achieve this use case using CSS alone? My goal is for the header-wrapper to be flexible rather than having a fixed width. I simply want the input to match the width of the div with the class "head". The input should share the same width and size as the head element.
function dblClickHanlder(){
console.log("dbl click handler called");
let inputEl = document.createElement("input");
inputEl.style.display="inline-block";
let headEl = document.querySelector(".head");
headEl.style.display="none";
document.querySelector(".header-wrapper").appendChild(inputEl);
inputEl.focus();
}* {
box-sizing: border-box;
}
.wrapper{
border: 1px solid black;
display:flex;
flex:1 0 auto;
}
.header-wrapper{
display: flex;
border: 1px solid red;
}<div class="wrapper">
<div class="header-wrapper">
<div ondblclick="dblClickHanlder()" class="head">Heading</div>
</div>
</div>