JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div>100kg</div>
<input type="number" value="100" style="display: none;">
<button>Edit</button>

CSS

* {
  float: left;
}

JavaScript

var $ = document.querySelector.bind(document)

$("button").addEventListener("click", function() {
  $("div").style.display = "none"
  var input = $("input")
  input.style.display = "block"
  input.focus()
  input.type = "text"
  input.setSelectionRange(0, input.value.length)
  input.type = "number"
})