FLEX
Run 
<!doctype html>
	<head>
		<style>
			/* CSS comes here */
            .flex-container {
              display: flex;
            }
            .flex-item {
              height: 150px;
              width: 150px;
              margin: 5px;
              font-size: 30px;
              padding: 10px;
            }
            .red {
              background-color: red;
              color: white;
            }
            /* The flex-order Property */
            .item-1 {
              flex: 2 2 auto;
            }
            .item-2 {
                flex: 1 0 250px;
            }
            /* Google Fonts Setup */
            body {
              font-family: "Roboto", sans-serif;
            }
		</style>
		<title>Flex</title>
	</head>
	<body>
      <div class="flex-container">
        <div class="flex-item item-1 red">1</div>
        <div class="flex-item item-2 red">2</div>
        <div class="flex-item item-3 red">3</div>
        <div class="flex-item item-4 red">4</div>
      </div>
    </body>
</html>