Single-line contentent-editable div

by dpnminh

HTML

<div>I'm just a regular div</div>

<div contenteditable="true" class="single-line">hello I'm a div acting like an input</div>

<input type="text" value="hello I'm a an input" />

CSS

[contenteditable="true"]
{
    color:red;
}

div
{
    width: 200px;
    padding: 0 10px;
}
[contenteditable="true"].single-line {
       // white-space: nowrap;
        width:200px;
        overflow: hidden;
} 
[contenteditable="true"].single-line br {
    display:none;
    
}
[contenteditable="true"].single-line * {
    display:inline;
    //white-space:nowrap;
}