JSFiddle - React, Tailwind, and code Playground

HTML

<div class="month-header">
  <div class="wrapper clearfix">
      <div class="left">
          <label class="month">MONTH</label>
      </div>
      <div class="right month-name">
          <label> MONTH-NAME & YEAR </label> 
      </div>
  </div>
  <div class="wrapper clearfix">
      <div class="left">
          <label class="kw">KV</label>
      </div>
      <div class="right">
  
      </div>
  </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="date">DATE</label>
         </div>
         <div class="right">

         </div>
    </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="tag">TAG</label>
        </div>
        <div class="right">

        </div>
    </div>
</div>

CSS

.month-header {
    border: 1px solid;
    padding-top:1px;
}
.month, .kw, .date, .tag {
    border: 1px solid rgb(216,226,231);
    width: 68px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    
}
.wrapper {
    display: block;
}
.month-name {
    border: 1px solid rgb(216,226,231);
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
}
.right {
    float: right;
}
.left {
    float: left;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
  visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}