JSFiddle - React, Tailwind, and code Playground

HTML

<grid-cell>Hello World<input type="text" value="Hello World" /></grid-cell>
<br />
<button>toggle input</button>

CSS

grid-cell {
  box-sizing: border-box;
  display: block;
  height: 40px;
  line-height: 40px;
  width: 200px;
  border: 1px solid #ddd;
  position: relative;
  font-family: arial;
  font-size: 12px;
}

input {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  line-height: 40px;
  border: none;
  font-family: arial;
  font-size: 12px;
}

JavaScript

var toggle = document.querySelector('button');
var input = document.querySelector('input');
toggle.addEventListener('click', function (event) {
	input.style.display = input.style.display === 'none' ? 'block' : 'none';
});