Manually resize CodeMirror using only CSS

manually-resize-codemirror.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/mode/css/css.js"></script>

<style>
#cm-wrapper {
  overflow: hidden;
  resize: both;
  border: 1px black solid;
  width: 300px;
  height: 200px;
  padding: 0 10px 10px 0;
  /* background-color: #ddd; */
}
.CodeMirror {
  border-right: grey 1px solid;
  border-bottom: grey 1px solid;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

<div id="cm-wrapper"></div>

<textarea name="css">
/* foo */
</textarea>

<script>
const t = document.getElementsByName("css")[0];
t.style.display = "none";
const w =  document.getElementById("cm-wrapper");
CodeMirror(w, {
  value: t.value,
  onChange: (e) => t.textContent = e.getValue(),
});
</script>