.menuItem { height: 50px; margin: 0px 28px 0px 16px; padding: 0px 10px; display: flex; flex-direction: row; align-items: center; } .menuItem.active { color: #fff; background-color: #29bbe4; } .selectorWrapper { position: relative; } .selectorWrapper .selector { display: flex; align-items: center; flex-direction: row; margin: 0px 10px 0px 16px; padding: 0px 10px; width: 274px; } .selectorWrapper .selector .selectorLabel { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 50px; width: 226px; } .selectorWrapper .optionsWrapper { flex-shrink: 0; height: 0px; opacity: 0; overflow: hidden; transition: all 0.3s ease-out; } .selectorWrapper .optionsWrapper.visible { display: flex; flex-direction: column; height: 320px; opacity: 1; } .selectorWrapper .optionsWrapper .option { display: flex; flex-direction: row; align-items: center; height: 32px; line-height: 32px; padding: 0 20px 0 50px; background-color: white; text-align: left; justify-content: flex-start; white-space: nowrap; } .selectorWrapper .optionsWrapper .option.active { color: #fff; background-color: #29bbe4; }