I am trying to build a 2x2 box with flex box to look something like this: [![enter image description here](https://i.stack.imgur.com/mcWcp.jpg)](https://i.stack.imgur.com/mcWcp.jpg)

With my current code, I can't get the text to break off into a seperate row so mine looks like this: [![enter image description here](https://i.stack.imgur.com/FdM8x.jpg)](https://i.stack.imgur.com/FdM8x.jpg)

I've tried using `</br>` tags to break the text into another row but no luck. Anyone know how I could acheive this? Here is my code:

```css
* {
  margin: 0;
  box-sizing: border-box;
}

.deats-cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 240px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.deat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  flex-wrap: wrap;
  /* width: 100px; */
  padding: 20px;
  /* border: 1px solid black; */
  margin: 0px;
}

.deat1 {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
.deat2 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}
.deat3 {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
.deat4 {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
```

```html
   <div class="deats-cont">
      <div class="deat deat1">
        <h1>2K</h1>
      </br>
        <p>Apps developed</p>
      </div>
      <div class="deat deat2">
        <h1>160</h1>
      </br>
        <p>Employees</p>
      </div>
      <div class="deat deat3">
        <h1>12</h1>
      </br>
        <p>Awards Won</p>
      </div>
      <div class="deat deat4">
        <h1>40</h1>
      </br>
        <p>Consultants</p>
      </div>

    </div>
```

And a codepen: <https://codepen.io/caseycling/pen/VwmExMY>