SOURCE

<div class="parent">
	<div class="child" contenteditable>:)</div>
</div>
<div class='place-bar'></div>
<div class="parent2">
	<div class="sidebar" contenteditable>
		Min: 150px
		<br/>
			Max: 25%
	</div>
	<p class="content" contenteditable>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto
		quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?
	</p>
</div>

.parent {
    display: grid;
    place-items: center;
    background: lightblue;
    width: 300px;
    height: 200px;
    resize: both;
    overflow: auto;
}

.child {
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid red;
    background: lightpink;
    font-size: 2rem;
    text-align: center;
}

body {
    font-family: system-ui, serif;
}



p{
    margin: 0;
}
.place-bar{
    height: 2em;
}
.parent2 {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
}

.sidebar {
  height: 30vh;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}

.content {
  padding: 2rem;
  background: lightblue;
}