блочные элементы не выравниваются,

dabblet.css

.wrapper
{
	padding-left: 4em;	
	text-align: right;
}

.wrapper p
{	
/* 
	блочные элементы не выравниваются,
	но наследую выравнивание для своих строк и
	строчных элементов внутри
*/
	display: inline-block;
	width: 60%;
}

.grid
{
            text-align: justify;
}

.grid div
{
	display: inline-block;
		
	width: 150px;
	padding: 10px;
	margin: 20px 20px 0 0;
	
	background: #fff;

	text-align: justify;
	vertical-align: top;
	
	box-shadow: 0 0 5px rgba(0,0,0,0.4);
}


/* 
	нужно для того, 
	чтобы последняя 
	строка тоже растягивалась 
*/
/*.grid:after
{
	display: inline-block;
	width: 100%;

	content: "";
} */

dabblet.html

<div class="wrapper">
	<h1 class="start-quote">«Мелодический громкостнoй прогрессийный период — актуальная национальная задача»</h1>
	<p class="start-quote">
		«Интервально-прогрессийная континуальная», так или иначе, вызывает мелодический звукосниматель, в таких условиях можно спокойно выпускать пластинки раз в три года.
	</p>
	<p>
		Как было показано выше, контрапункт контрастных фактур выстраивает звукорядный райдер
	</p>	
</div>

<div class="grid">
	<div>long long line 1<br>long long line 1</div>
	<div>long line 2</div>
	<div>long line 3</div>
	<div>long line 4</div>
	<div>long line 5</div>
	<div>long line 6</div>
	<div>long line 7</div>
	<div>long line 8</div>
	<div>long line 9</div>
	<div>long line 10</div>
	<div>long line 11</div>
	<div>long line 12</div>
	
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}