Untitled

dabblet.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

.container {
  display: flex;
  
  width: 600px;
  text-align: center;
  }

.box {
  flex-grow: 1;
  
  border: 1px solid;
  }
.center {
	flex-grow: 0; /* to get the box to wrap closely around the text */
	
	color: white;
	background-color: #444;
	}
.left {background-color: lightgreen}
.right {background-color: indianred;}

dabblet.html

<div class='container'>
  <div class='box left'></div>
  <div class='box center'>enter text here to see this box grow!</div>
  <div class='box right'></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}