<h1>January 2022</h1>

<div class="calendar-container">
  <div class="calendar-day">
    <div class="calendar-day--number">1</div>
    <div class="calendar-day--content">
      <p>Nothing to do today... carry on citizen
      <p>Happy New Year
    </div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">2</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">3</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">4</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">5</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">6</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">7</div>
    <div class="calendar-day--content"></div>
  </div>

  <!-- Week 2 -->
  <div class="calendar-day">
    <div class="calendar-day--number">8</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">9</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">10</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">11</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">12</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">13</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">14</div>
    <div class="calendar-day--content"></div>
  </div>

  <!-- Week 3 -->
  <div class="calendar-day">
    <div class="calendar-day--number">15</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">16</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">17</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">18</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">19</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">20</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">21</div>
    <div class="calendar-day--content"></div>
  </div>

  <!-- Week 4 -->
  <div class="calendar-day">
    <div class="calendar-day--number">22</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">23</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">24</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">25</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">26</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">27</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">28</div>
    <div class="calendar-day--content"></div>
  </div>

  <!-- Week 5 -->
  <div class="calendar-day">
    <div class="calendar-day--number">29</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">30</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">31</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">&nbsp;</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">&nbspl</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">&nbsp;</div>
    <div class="calendar-day--content"></div>
  </div>
  <div class="calendar-day">
    <div class="calendar-day--number">&nbsp;</div>
    <div class="calendar-day--content"></div>
  </div>

</div>
* {
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
}

.calendar-container {
  display: grid;
  grid-template-columns: repeat(7, 300px);
  gap: 1em;
}

.calendar-day {
  display: flex;
  gap: 1em;
  flex-flow: column;
  border: 2px solid black;
}

.calendar-day--number {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-end;
  background-color: rebeccapurple;
  color: white;
  height: 50px;
  padding: 0;
}

.calendar-day--content {
  padding: 0 1em 0 1em;
}

@media (max-width: 600px) {
  .calendar-container {
    display: flex;
    flex-flow: column;
    gap: 1em;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.