<div class="container">
  <span id="horizontal-axis">Main Axis</span>
  <span id="vertical-axis">Cross Axis</span>
  <div class="fi fi-1"><p>1</p></div>
  <div class="fi fi-2"><p>2</p></div>
  <div class="fi fi-3"><p>3</p></div>
  <div class="fi fi-4"><p>4</p></div>
  <div class="fi fi-5"><p>5</p></div>
  <div class="fi fi-6"><p>6</p></div>
  <div class="fi fi-7"><p>7</p></div>
  <div class="fi fi-8"><p>8</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;
}

.fi-2, .fi-4, .fi-6, .fi-8 {
  align-self: center;
}

.fi-3, .fi-7 {
  align-self: flex-end;
}