JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Flexbox | Revisit</title>
  </head>
  <body>
    <main class="flex-container">
      <div class="flex-item col1">col1</div>
      <div class="flex-item col2">col1</div>
      <div class="flex-item col3">col3</div>
      <div class="flex-item col4">col4</div>
      <div class="flex-item col5">col5</div>
    </main>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 1rem;
}

/* --- This much code will do it for you --- */
.flex-container {
  display: flex;
}

.flex-item {
  min-height: 400px;
  border: 4px solid #03a503;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.flex-item:first-of-type,
.flex-item:last-of-type {
  margin-right: 1rem;
}

/* ----- Basic break-point ----- */
@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-item {
    min-height: 100px;
    margin: 0.5rem;
  }
  .flex-item:first-of-type,
  .flex-item:last-of-type {
    margin: 0.5rem;
  }
}