EXAMPLE
Run 
<!DOCTYPE html>
<html>

<head>
	<title>The flex property in CSS</title>
	<style type="text/css">
		#flex-container {
		  display: flex;
		  flex-direction: row;
		  border: 2px solid red;
		  background-color: pink;
		}
		
		#flex-container > .flex-item {
		  flex: 40%;
		  border: 2px solid purple;
		  background-color: gray;
		}
		
		#flex-container > .raw-item {
		  width: 5rem;
		  border: 2px solid green;
		  background-color: skyblue;
		  flex: 20%;
		}
	</style>
</head>

<body>
	<div id="flex-container">
		<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
		<div class="raw-item" id="raw">Raw box</div>
	</div>
</body>

</html>