Flex Example

by elizabethkmathew

HTML

<div class="text-grid">
  <p class="first">
    01
  </p>
  <p class="second">
    02
  </p>

  <p class="third">
    03
  </p>
  <p class="fourth">
    04
  </p>
</div>

CSS

.text-grid {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 150px;
}

.text-grid p {
  font-size: 19px;
  width: 75px;
  position: relative;
}

.text-grid p:after {
  position: absolute;
  content: "";
  background-color: #ccc;
}

.first::after,
.fourth::after {
  width: 2px;
  height: 35px;
  top: -10px;
}

.first::after {
  left: 65%;
}

.second::after,
.third::after {
  width: 45px;
  height: 2px;
  left: -10px;
}

.second::after {
  bottom: -75%;
}

.third::after {
  top: -100%;
}

.fourth::after {
  left: -35%;
}