Flexbox

Flexbox Test

HTML

<div class="wrapper">
		<div id="firstContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">Short Title</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
				    <div class="recommend lightGreen">Blah Blah blah</div>
		    	</div>
		    </div>
		</div>
	
		<div id="secondContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">This is a medium length Title. Still pretty short though.</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
				    <div class="recommend lightGreen">Blah Blah blah</div>
		    	</div>
		    </div>
		</div>

		<div id="thirdContainer">
		    <div class="container">
		        <div class="row lightGrey">
		            <h3 class="title">A really really really really really really really really really long title. Much longer than the previous titles.</h3>
		        </div>
		    </div>

		     <div class="container">
		        <div class="col">
		            <div class="img darkGrey"><img src="" /></div>
		            <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
		        </div>
		    </div>

		    <div class="container">
		    	<div class="row">
		    		<div class="reviewText lightYellow">Blah Blah blah Blah...

CSS

body {
	        font-family: Arial, sans-serif;
	        font-size: 12px;
	    }

	    /*----Flexbox Containers----*/
	    .wrapper {
	        display: -webkit-flex;
	        display: -ms-flexbox;
	        display: flex;
	        overflow: hidden;
	    }

	    .container {
	    	display: -webkit-flex;
	        display: -ms-flexbox;
	        display: flex;
          height: 200px;
	    }

	    #firstContainer, #secondContainer, #thirdContainer {
	    	flex:1;
        display: flex;
        flex-direction: column;
        height: 300px;
	    }

	    .row {
	    	flex:1;
	    }

	    .col {
	    	display:flex;
	    	flex:1;
	    }


	    .img, .info {
	    	flex:0.5;
	    }

	    .title, .img, .info, .reviewText, .recommend, h3 {
	    	padding: 10px 15px;
	    }

	    .title {
	    	font-size:20px;
	    }

	    .lightGrey {
	    	background-color:#b3b3b3;
	    }

	    .darkGrey {
	    	background-color:#5d5d5d;
	    }

	    .lightRed {
	    	background-color:#744646;
	    }

	    .lightYellow {
	    	background-color:#c2c6a1;
	    }

	    .lightGreen {
	    	background-color:#a7c6a1;
	    }


	    @media screen and (max-width: 767px) {
	        .wrapper {
	            flex-direction: column;
	        }
	    }

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>