JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="calendar" class="container-fluid">

  <h4><b>My Calendar</b></h4>
  
    
    
    
<!--Event 1-->     
    <div class="row">
     <div class="div-event">
      <span class="date-event col-xs-2 col-sm-2"><span class="num-date-event">22</span>    <br>SEP</span>
      
      <button class="btn btn-event btn-block col-xs-8 col-sm-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Katy's Super Party<br>at her house</button>

      <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-sm-2" aria-     hidden="true"><span class="text-event"><br>PARTY</span></span>

        <div class="collapse" id="collapse-1"> 
        <div class="well">
          ...
        </div>
        </div> 
     </div>
          </div>

          
          
          
<!--Event 2-->           
    <div class="row">      
     <div class="div-event">
      <span class="date-event col-xs-2 col-sm-2"><span class="num-date-event">23</span><br>SEP</span>
      
      <button class="btn btn-event btn-block col-xs-8 col-sm-8" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">Pool Party because<br>of my birthday!</button>

      <span class="glyphicon glyphicon-music icon-event col-xs-2 col-sm-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>

        <div class="collapse" id="collapse-2"> 
        <div class="well">
          ...
        </div>
        </div> 
     </div>  
     </div>
          
     
          
          
<!--Event 3--> 
    <div class="row">
     <div class="div-event">
      <span class="date-event col-xs-2 col-sm-2"><span class="num-date-event">24</span><br>SEP</span>
      
      <button class="btn btn-event btn-block col-xs-8...

CSS

/* #calendar {
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
} 

.div-event {
  display: inline-block;
} */

.date-event {
  padding: 10px;
  transform: translateY(5%);
  display: inline-block;
  text-align: center;
  font-size: 10px;
}

.num-date-event {
  font-weight: 700;
  font-size: 18px;
  color: #f4981f;
}

.btn-event {
  background-color: white;
  border: 1px dotted lightgray;
  padding-left: 25px;
  padding-right: 25px;
  margin-top: -19px;
  display: inline-block;
}

.icon-event {
  text-align: center;
  color: gray;
  border: 1px dotted lightgray;
  border-radius: 5px;
  padding: 10px;
}

.text-event {
  text-align: center;
  font-family: Arial;
  font-size: 8px;
  color: gray;
}

.collapse {
  margin-top: 10px;
}