JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class = "main-container">
      <div class="left-panel">          
          <div class="filter-container">               
              <div class="table">
                  <div class="table-row">
                      <div class="radio-container">
                          <div class="overflow">
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm"/>
                                      radio button
                                  </label>
                              </div>
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm"/>
                                      radio button
                                  </label>
                              </div>
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm" />
                                      radio button
                                  </label>
                              </div>
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm" />
                                      radio button
                                  </label>
                              </div>
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm"/>
                                      radio button
                                  </label>
                              </div>
                              <div>
                                  <label>
                                      <input type="radio" name="filterFieldsForm" />
                                      radio button
...

SCSS

html, body {
  height: 100%;
  padding: 0;
  position: relative;
  margin: 0;
}
.main-container {    
    position: relative;
    overflow: hidden;    
    height: 100%;
    width: 100%;            
    .left-panel {
        top: 0;
        left: 0;
        bottom: 0;        
        width: 300px;
        background: #fff;
        position: absolute;
        transition: bottom 0.5s ease;        
        .filter-container {
           position: absolute;
           background: #F6F6F6;
           top: 50%;
           transform: translateY(-50%);
           width: 100%;
           .table {
               display: table;
               width: 100%;
               .table-row {
                display: table-row;
                height: 100%;                    
                    .radio-container {                
                        display: table-cell;
                        padding: 25px 25px;
                        display: table-cell;
                        vertical-align: middle;
                        .overflow {
                            overflow-y: scroll;
                            max-height: 100%;
                        }
                    }
                }
                .filter-title {
                    display: table-cell;
                    width: 20px;                                
                    background: #539ACC;
                    vertical-align: middle;
                    span {
                        -webkit-writing-mode: vertical-lr; 
                        white-space: nowrap;
                    }
                }
              
           }
        }                    
    }
    .bottom-panel {
        height: 200px;
        position: absolute;
        bottom: -200px;
        background: #F6F6F1;
        width: 80%;
        left: 0;
        right: 0;
        margin: auto;
        transition: bottom 0.5s ease;
    }
    &.shown {
        .left-panel {
           bottom: 200px; 
        }       
       ...