JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div class="a" contenteditable>
blablabla
  <div class="b" contenteditable=false>
    <div class="c">
    </div>
    <div class="d">
    </div>
  </div>
bleh
</div>
</body>
</html>

CSS

.a {
border: 1px dashed gray;
padding: 5px;
}

.b {
  border:1px dashed blue;
  padding:5px;
  width:100px;
  vertical-align:middle;
  display:inline-block;
}
.c {
  border:1px dashed red;
  height:15px;
}
.d {
  margin-top:5px;
  border:1px dashed green;
  height:15px;
}
*:focus {
  outline: none;
}