<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(2) {
-webkit-flex-grow: 6;
}
.box div:nth-of-type(3) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(4) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(5) {
-webkit-flex-grow: 1;
}
/* Standard syntax */
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {