<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
.container { 
  width: 960px; 
  margin: 0 auto;
}
.box {margin: 10px; padding: 0 5px; border: 1px solid #ccc; width: 30%;}
.boxes {
  display: -webkit-box;  
  display: -moz-flexbox;  
  display: -ms-flexbox; 
  display: -webkit-flex; 
  display: -moz-flex;     
  display: flex;         
}

.boxes.zero {
  -webkit-box-align: stretch; 
  -moz-box-align: stretch; 
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;	
}

.boxes.one {
  -webkit-box-align: flex-start; 
  -moz-box-align: flex-start;
  -ms-flex-align: flex-start; 
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;	
}


.boxes.two {
  -webkit-box-align: baseline; 
  -moz-box-align: baseline; 
  -ms-flex-align: baseline; 
  -webkit-align-items: baseline;
  -moz-align-items: baseline; 
  align-items: baseline;	
}

.boxes.three {
  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;	
}

.boxes.four {
  -webkit-box-align: flex-end; 
  -moz-box-align: flex-end; 
  -ms-flex-align: flex-end; 
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;	
}



	</style>
	
	
	<div class="container">
  
	<h2>Boxes stretched to same height</h2>
    <div class="boxes zero">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nulla lectus. Ut consectetur erat eros, nec fermentum ligula porta id. Fusce ipsum massa, bibendum nec lectus sit amet, sollicitudin malesuada odio. Etiam malesuada felis nec eros venenatis, sit amet dignissim lacus blandit. </p>
        </div>
        <div class="box">
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed leo eget turpis commodo accumsan.</p>
        </div>
        <div class="box">
        	<p>Vestibulum semper rhoncus nunc, ac fermentum nisi pulvinar sed.</p>
        </div>
    </div>
  
		
		 <div class="boxes zero">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nulla lectus. Ut consectetur erat eros, nec fermentum ligula porta id. Fusce ipsum massa, bibendum nec lectus sit amet, sollicitudin malesuada odio. Etiam malesuada felis nec eros venenatis, sit amet dignissim lacus blandit. </p>
        </div>
        <div class="box">
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed leo eget turpis commodo accumsan.</p>
        </div>
        <div class="box">
        	<p>Vestibulum semper rhoncus nunc, ac fermentum nisi pulvinar sed.</p>
        </div>
    </div>
		
		
		
		
				
	<!--	
	<h2>Boxes top aligned</h2>
    <div class="boxes one">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nulla lectus. Ut consectetur erat eros, nec fermentum ligula porta id. Fusce ipsum massa, bibendum nec lectus sit amet, sollicitudin malesuada odio. Etiam malesuada felis nec eros venenatis, sit amet dignissim lacus blandit. </p>
        </div>
        <div class="box">
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed leo eget turpis commodo accumsan.</p>
        </div>
        <div class="box">
        	<p>Vestibulum semper rhoncus nunc, ac fermentum nisi pulvinar sed.</p>
        </div>
    </div>
  

	<h2>Boxes baseline aligned</h2>
    <div class="boxes two">
        <div class="box">
            <h1 style="font-size:38px;">Lorem ipsum</h1>
        </div>
        <div class="box">
            <h4 style="font-size:12px;">Lorem ipsum dolor sit amet</h4>
        </div>
        <div class="box">
            <h2 style="font-size:24px;">Lorem ipsum dolor sit</h2>
        </div>
    </div>
  
	<h2>Boxes centre aligned</h2>
    <div class="boxes three">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nulla lectus. Ut consectetur erat eros, nec fermentum ligula porta id. Fusce ipsum massa, bibendum nec lectus sit amet, sollicitudin malesuada odio. Etiam malesuada felis nec eros venenatis, sit amet dignissim lacus blandit. </p>
        </div>
        <div class="box">
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed leo eget turpis commodo accumsan.</p>
        </div>
        <div class="box">
        	<p>Vestibulum semper rhoncus nunc, ac fermentum nisi pulvinar sed.</p>
        </div>
    </div>
  
	<h2>Boxes bottom aligned</h2>
    <div class="boxes four">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nulla lectus. Ut consectetur erat eros, nec fermentum ligula porta id. Fusce ipsum massa, bibendum nec lectus sit amet, sollicitudin malesuada odio. Etiam malesuada felis nec eros venenatis, sit amet dignissim lacus blandit. </p>
        </div>
        <div class="box">
        	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed leo eget turpis commodo accumsan.</p>
        </div>
        <div class="box">
        	<p>Vestibulum semper rhoncus nunc, ac fermentum nisi pulvinar sed.</p>
        </div>
    </div> -->
  
</div>


	
	
	
	
<body>
</body>
</html>