JSFiddle - React, Tailwind, and code Playground

by larsi

HTML

<div class="main">

 
    <div class="s-day" >
      <div class="s-slot-area-container">
        <div class="s-slot-area">
          <div class="s-slot-area-name">Slot1</div>
        </div>
        <div class="s-slot-area">
          <div class="s-slot-area-name">Slot2</div>
        </div>
      </div>
    </div>

  <div class="s-day" >
    <div class="s-slot-area-container">
      <div class="s-slot-area">
        <div class="s-slot-area-name">Slot1</div>
        <div>some text</div>
      </div>
      <div class="s-slot-area">
        <div class="s-slot-area-name">Slot2</div>
      </div>
      <div class="s-slot-area">
        <div class="s-slot-area-name">Slot2</div>
      </div>
    </div>
  </div>


</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.main {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  height: 200px;
}

.s-day {
    height: 100%;
    width:100px;
    border: 1px solid gainsboro;
    display: flex;
    flex-direction: column;
}



.s-slot-area-container {
    display: flex;
    flex-direction: column;
    flex: 1  1;
}
.s-slot-area {
    border: 1px solid gainsboro;    
    background-color: hotpink;
    flex: 1 1;
}