JavaScript में टाइप करते समय HTML टेक्स्ट इनपुट फील्ड को ऑटो-ग्रो कैसे करें?

उदाहरण

contenteditable="true" वाले span एलिमेंट का उपयोग करके ऑटो-ग्रोइंग टेक्स्ट फील्ड बनाएं।

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
<style> 
    span { border: solid 2px skyblue; } 
    div { max-width: 500px; } 
</style> 
</head> 
<body> 
<div> 
<span contenteditable="true">John Smith</span> 
</div> 
</body> 
</html>

फ़ाइल सेव करें और Live Server से खोलें।

आउटपुट

स्पैन एलिमेंट टाइप करने पर ऑटोमेटिकली चौड़ा होगा।