bulma css demo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css">
<div class="main-container-top-menu scroll1" id="main-container-top-menu">
    <div class="top-menu-item-container-empty">
      <div style="width: 50px"></div>
    </div>
    
    
    
    <div class="top-menu-item-container">
      <div class="inactive-border-bottom">
          <p class="control has-icons-left is-expanded">
          <span class="select is-fullwidth ">
            <select class="full-height">
              <option>dropdown</option>
              <option>options 1</option>
            </select>                  
          </span>
          <span class="icon is-small is-left"><i class="far fa-building"></i></span>
        </p> 
        
        
      </div>
    </div>

    
     <div class="top-menu-item-container" >
        <div>
          <div class="top-menu-item">2. Lot and Model</div>
        </div>
    </div>
    

    <div class="top-menu-item-container" >
      <div [className]="ishpExpanded?'active-border-bottom':'inactive-border-bottom'">
        <div class="top-menu-item">3. Home Plan</div>
      </div>
    </div>
  
    <div class="top-menu-item-container">
      <div [className]="isupgExpanded?'active-border-bottom':'inactive-border-bottom'">
        <div class="top-menu-item">4. Upgrades</div>
      </div>
    </div>
  
    <div class="top-menu-item-container">
      <div [className]="isnextExpanded?'active-border-bottom':'inactive-border-bottom'">
        <div class="top-menu-item">5. Next Steps</div>
      </div>
    </div>


    <div class="top-menu-icon-container">
      <i class="fas fa-print top-menu-icon"></i>
      <i class="fas fa-share-alt top-menu-icon"></i>
    </div>

  </div>

CSS

.scroll1::-webkit-scrollbar {
    width: 0px;
    height: 3px;
  }
  
  .scroll1::-webkit-scrollbar-track {
    background: #eff0f0;
  }
  
  .scroll1::-webkit-scrollbar-thumb {
    background: #666;
  }
  .main-container-top-menu {
    scrollbar-width: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 
  }
  
  .top-menu-item-container-empty {
    border-bottom: 2px solid #eff0f0;
    font-family: "Roboto", sans-serif;
    border-right: 2px solid #eff0f0;
    box-sizing: border-box;
    color: #626262;
    font-size: 14px;
    font-weight: 350;
    user-select: none;
    justify-content: space-between;
  }
  .top-menu-item-container {
    border-bottom: 2px solid #eff0f0;
    font-family: "Roboto", sans-serif;
    border-right: 2px solid #eff0f0;
    box-sizing: border-box;
    color: #626262;
    font-size: 14px;
    font-weight: 350;
    user-select: none;
    flex: 1;
    justify-content: space-between;
  }
  .active-border-bottom {
    align-items: center;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    border-bottom: 3px solid #eb2028;
    box-sizing: border-box;
  }
  .inactive-border-bottom {
    align-items: center;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
  }
  .top-menu-item-active {
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    padding: 5px;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    color: #1d1d1d;
    font-size: 14px;
    font-weight: 350;
    user-select: none;
    align-items: center;
    justify-content: center;
    display: flex;
    stroke-width: 0.6px;
    -webkit-text-stroke-width: 0.6px;
    flex: 1;
  }
  .top-menu-item {
    cursor: pointer;
    padding: 10px;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    color: #626262;
    font-size: 14px;
    user-select: none;
    align-items: center;
    justify-content: center;
    display: flex;
    flex:...