Alignement liste ol li comme un tableau top et bottom

Je n'arrive pas depuis plusieurs jours à obtenir le résultat que j'ai sur l'image.

voila le code que j'essaye d'organiser en css :

<div id="content">
<ol class="premiereliste">

<li>
	<div>
    	<p style="vertical-align:top;background-color:red">qsdqsdqsdqsdqsdqsdqsdqsd qsdqsdqsdqsdqsdqsdqsdqsd qsdqsdqsdqsdqsdqsdqsdqsd qsdqsdqsdqsdqsdqsdqsdqsd qsdqsdqsdqsdqsdqsdqsdqsd qsdqsdqsdqsdqsdqsdqsdqsd</p>
    	
        <p style="vertical-align:top;background-color:blue">hfghrthrthrthrththth hfghrthrthrthrththth hfghrthrthrthrththth hfghrthrthrthrththth hfghrthrthrthrththth</p>
    </div>
</li>  

<li>

	<div>
    	<p style="vertical-align:top;background-color:green">nghnghnbgbfg nghnghnbgbfg nghnghnbgbfg nghnghnbgbfg nghnghnbgbfg nghnghnbgbfg</p>
    	
        <p style="vertical-align:top;background-color:yellow">iyouiouiouio iyouiouiouio iyouiouiouio iyouiouiouio iyouiouiouio</p>
    </div>
    
</li>
</ol>
</div>
 

voila une partie du css que j'utilise :

#content
{
	width:800px;
}
ol
{
	list-style-type:none;
	padding:0;
	margin:0;
}
.premiereliste
{

}
.premiereliste li
{
	display:inline-table;
	width:380px;
}

en gros j'aimerais aligner le bloc du haut avec le haut et le bloc du bas avec le bas.

si vous arrivez à resoudre ce petit défi je vous remercie