JSFiddle - React, Tailwind, and code Playground

by Simo990

HTML

<div contenteditable="true" class="listItem">This is a really big field. This is a really big field. This is a really big field. This is a really big field. This is a really big field. This ids a really big field. This is a really big field. This is a really big field. asdasdasdasdas asd asd as</div>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>

<button id="button">click me</button>

CSS

.listItem {
padding: 2.5ex 0 0;
bottom: 9px;
cursor: text;
background: none repeat scroll 0 0 transparent;
border: medium none;
border-radius: 0 0 0 0;
box-shadow: none;
color: #3F3C3A;
font-size: 12px;
height: 14px;
line-height: 14px;
margin: 0 0 0 5px;
overflow: hidden;
padding: 0;
bottom: 0;
position: relative;
white-space: nowrap;
width: 640px;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
}
.listItem:focus {
    text-overflow: clip !important;
}

JavaScript

window.onload = function () { 
    document.getElementById('button').click = function () {
        window.scrollTo(0,0)
    }   
}