display: box, box-flex - Learning CSS3

dabblet.css

/**
 * display: box, box-flex - Learning CSS3
 */

/*
 * The box-flex property specifies whether the child elements of a box is flexible or inflexible in size.
 * Elements that are flexible can shrink or grow as the box shrinks and grows. Whenever there is extra space in a box, flexible elements are expanded to fill that space.
 */
.panel { border: solid 1px #ccc; display: box; }
#p1 { border: solid 1px #f90; box-flex: 3; }
#p2 { border: solid 1px #09f; box-flex: 2; }

.panel2 { height: 400px; }
.orient { box-orient: horizontal; }
.align { box-align: center; }
/*
 * box-pack: start|end|center|justify;
 * The box-pack property specifies where child elements of a box are placed when the box is larger than the size of the children.
 * This property specifies the horizontal position in horizontal boxes, and the vertical position in vertical boxes.
 */
.pack { box-pack: center; }

dabblet.html

<div class="panel">
    <p id="p1">Left</p>
    <p id="p2">Right</p>
</div><br/>
<div class="panel panel2 pack align">
    <p>Where am I?</p>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}