Flex Row Content - adding divs holds row

<!DOCTYPE html>
<html>
<head>

<style>

    body{
        background-color: #FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
    }

.flex-row {
  display: flex;
  flex-direction: row;
  background-color: #dedede;
}

.flex-row > div {
  background-color: #ffffff;
  width: 100%;
  margin: 10px;
  /*text-align: center;*/
  /*line-height: 100px;*/
  /*font-size: 30px;*/
}

</style>

</head>
<body>

<h2>HTML Content</h2>

<div class="flex-row">
    <div>1</div>
    <div>2</div>
    <div>Because a viewer can be distracted by meaningful content, greeking unimportant text forces the viewer to focus on layout and design</div>
    <div>4</div>
  </div>

<script>
    //JAVASCRIPT START
    console.log("Javascript Start");
</script>

</body>
</html>