<div class="container">
  <span id="horizontal-axis">Main Axis</span>
  <span id="vertical-axis">Cross Axis</span>
  <div class="fi"><p>1</p></div>
  <div class="fi"><p>2</p></div>
  <div class="fi"><p>3</p></div>
  <div class="fi"><p>4</p></div>
  <div class="fi"><p>5</p></div>
  <div class="fi"><p>6</p></div>
  <div class="fi"><p>7</p></div>
  <div class="fi"><p>8</p></div>
  <div class="fi"><p>9</p></div>
  <div class="fi"><p>10</p></div>
  <div class="fi"><p>11</p></div>
  <div class="fi"><p>12</p></div>
  <div class="fi"><p>13</p></div>
  <div class="fi"><p>14</p></div>
  <div class="fi"><p>15</p></div>
  <div class="fi"><p>16</p></div>
</div>

* {
  box-sizing: border-box;
}

.container {
  margin-left: 40px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  width: 408px;
  height: 200px;
  box-sizing: border-box;
  border: 4px solid #212226;
  position: relative;
}

#horizontal-axis {
  position: absolute;
  top: -30px;
  font-weight: 900;
}

#vertical-axis {
  position: absolute;
  left: -80px;
  transform-origin: bottom right;
  transform: rotate(-90deg);
  font-weight: 900;
}

.fi {
  background-color: #255954;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #71D99E;
  width: 50px;
  height: 50px;
}

.fi p {
  font-size: 1.5rem;
  margin: 0;
  color: #71D99E;
}