A CodePen by Anonymous.

index.html

<div class="composition vertical expand">
  <div class="v-label">Child 1</div>
  <div class="v-label expand">Child 2</div>
  <div class="v-label expand">Child 3</div>
</div>
<br>
<div class="composition horizontal expand"><div class="v-label expand">Child 1</div><div class="v-label">Child 2</div><div class="v-label">Child 3</div>
</div>

style.css

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  padding: 20px;
  margin: 0;
}

.composition,
.v-label {
  box-sizing: border-box;
  display: inline-block;
}

.composition {
  outline: 1px dashed gray;
  margin: 0 0 10px 0;
}

.vertical.composition > .v-label {
  display: block;
}

.v-label {
  width: 6em;
  height: 1.5em;
  outline: 1px solid rgba(0,0,0,.2);
}

.expand.horizontal::before {
  content: "";
  margin-left: -12em;
}

.expand.horizontal {
  padding-left: 12em;
  width: 100%;
}

.expand.horizontal > .expand {
  width: 100%;
}

.expand.vertical::before {
  content: "";
  margin-top: -1.5em;
  display: block;
}

.expand.vertical {
  padding-top: 1.5em;
  /* 100% */
  height: 50%;
}

.expand.vertical > .expand {
  height: 50%;
}

/*
Make this fully usable as a client side widget, so it can be used to render the caption wrappers as well (use the label element for captions)

*/