JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

CSS

.main {
  display: flex;
}

.month {
  flex: 0 0 auto;
}

.days {
  display: flex;
}

.day {
  flex: 0 0 2em;
}