JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
                <div class="item select-item">
                    <div class="label">по марке:</div>
                    <div class="select">
                        <div class="actual">Выбрать марку</div>
                        <ul>
                            <li><a href="#">Марка 1</a></li>
                            <li><a href="#">Марка 2</a></li>
                            <li><a href="#">Марка 3</a></li>
                        </ul>
                    </div>
                </div>
                <div class="item select-item">
                    <div class="label">по классу:</div>
                    <div class="select">
                        <div class="actual">Выбрать марку</div>
                        <ul>
                            <li><a href="#">Класс 1</a></li>
                            <li><a href="#">Класс 2</a></li>
                            <li><a href="#">Класс 3</a></li>
                        </ul>
                    </div>
                </div>
</div>

SCSS

.container { width: 400px; }
.select-item {
  .label {
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    display: block;
    margin: 5px 15px;
    width: 100%;
  }
  .select {
    position: relative;
    font-size: 14px;
    .actual {
      background: #FFFFFF;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      border: none;
      cursor: pointer;
      display: block;
      font-family: 'Exo 2', sans-serif;
      padding: 8px 15px;
      position: relative;
      width: 100%;
      &:after {
        content: "\f078";
        font-family: "FontAwesome", sans-serif;
        color: #000;
        position: absolute;
        right: 12px;
        top: 9px;
      }
      &:before {
        background: #EBF2F7;
        content: "";
        height:100%;
        position: absolute;
        top: 0;
        right: 39px;
        width: 1px;

      }
    }
    ul {
      background: #FFF;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
      max-height: 0;
      overflow: hidden;
      padding: 0 0 2px;
      position: absolute;
      -webkit-transition: max-height 1s;
      -moz-transition: max-height 1s;
      -ms-transition: max-height 1s;
      -o-transition: max-height 1s;
      transition: max-height 1s;
      width: 100%;
      z-index: 1;
      li {
        a { padding: 7px 20px; }
      }
    }
  }
  &.opened {
    ul {
      max-height: 600px;
      z-index: 10;

    }
    .actual {
      &:after {
        content: "\f077";
      }
      &:before {
        width: 0;
      }
    }
  }
}

JavaScript

$('.select-item').on('click', '.actual', function () {
        //$('.select-item').toggleClass('opened')
        $(this).closest('.select-item').toggleClass('opened');
        value = 'select-item';
    });