JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<style type="text/css">

DIV { display: inline; border: solid red 1px; }

 
.editable { background:yellow;}
    
.editable2 { background:yellow; display: inline-block}

.editable3 { background:yellow; display: block}
    
    
</style>
    inline:
<div class="editable" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</div>

<div class="editable" contentEditable="true"> short </div>

    <div class="editable" contentEditable="true"> This is test text.This is test text</div>
    <br /><br />
    inline-block:
    <div class="editable2" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</div>

<div class="editable2" contentEditable="true"> short </div>

    <div class="editable2" contentEditable="true"> This is test text.This is test text</div>
      <br /><br />
    block:
    <div class="editable3" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</div>

<div class="editable3" contentEditable="true"> short </div>

    <div class="editable3" contentEditable="true"> This is test text.This is test text</div>