Align

dabblet.css

/**
 * Align
 */

flex {
	display: flex;
	align-items: baseline;
}
div {
	width: 5em;
	border: 1px solid black;
	margin: 0 2px;
}

p {
	display: inline-block;
	width: 100%;
	margin: 0;
	background: red;
}
p + p {
	background: green;
}
p + p + p {
	background: blue;
}

dabblet.html

<flex>
<div>
  <p style="padding-bottom: 10px;">one</p>
  <p>one<br>two<br>three</p>
  <p>one<br>two</p>
</div>
<div>
  <p style="padding-bottom: 20px;">one<br>two<br>three</p>
  <p>one<br>two</p>
  <p>one</p>
</div>
<div>
  <p style="padding-bottom: 30px;">one<br>two</p>
  <p>one</p>
  <p>one<br>two<br>three</p>
</div>
</flex>

dabblet.js

// alert('Hello world!');

settings.json

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