<div class="config-box">
  <div class="form-group">
    <label class="control-label">Размер</label>
    <div class="options-list">
      <div class="option">S</div>
      <div class="option">M</div>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">Цвет</label>
    <div class="options-list">
      <div class="option">Красный</div>
      <div class="option">Зелёный</div>
    </div>
  </div>
</div>

.config-box {
  width: 400px;
}
.form-group {
  position: relative;
  border: 1px solid gray;
  margin: 15px 0;
}
.form-group .options-list {
  display: none;
}
.form-group.opened .options-list {
  display: block;
}
.option {
    position: relative;
    display: flex;
    padding: 13px 15px;
    font-size: 14px;
}
.control-label {
  display: inline-block;
  width: 100%;
  position: relative;
  font-size: 16px;
  margin: 0;
  padding: 13px 15px;
  box-sizing: border-box;
}
.form-group .control-label::after {
    top: 20px;
    right: 16px;
    border: 10px solid transparent;
    border-top: 10px solid gray;
    content: '';
    position: absolute;
}
.form-group.opened .control-label::after {
    top: 10px;
    right: 16px;
    border: 10px solid transparent;
    border-bottom: 10px solid #ebad36;
}

$('.config-box').on('click', '.control-label', function() {
  $(this)
    .closest('.form-group')
    .toggleClass('opened')
    .siblings()
    .removeClass('opened');
});
$(window).click(function (event) {
  if ($(event.target).closest('.form-group').length === 0) {
    $('.form-group.opened').removeClass('opened');
  }
});