Выпадающее меню Custom React для визуализации компонента

Question

Я пытаюсь написать выпадающий список компонентов. Другими словами, щелкните раскрывающийся список, и это не список меню, а компонент. Я столкнулся с проблемой, когда компонент неправильно расположен.

Вот мои настройки компонентов:

  render() {
    return (
      <div className={`row dropdownContainer ${this.props.className ? this.props.className : ''}`}>
        <div onClick={this.toggleChildren} className='col-xs-12 site-dropdown'>
          <span className='col-xs-8 placeholderText'>
            <h3>{this.props.placeholder}</h3>
          </span>
          <span className='col-xs-4 dropdownIcon'>
            <Icon size='medium' icon={this.state.hideChildren ? 'up' : 'down'}/>
          </span>
        </div>
        <div className='col-xs-12 dropdownContent' hidden={this.state.hideChildren}>
          {this.props.children}
        </div>
      </div>
    );
  }

А вот CSS для всего этого:

.dropdownContainer {
  position: relative;

  h3 {
    margin: 0 0 0 0;
  }

  .site-dropdown {
    background: white;
    border: 1px solid black;
    margin: 5px 15px 0 15px;
    font-size: 14px;
    box-sizing: inherit;  
    position: relative;
    white-space: nowrap;
    align-items: center;
    height: 35px;
  }

  .placeholderText {
    display: inline-flex;
    text-align: left;
    height: 21px;
    height: 100%;
    align-items: center;
  }

  .dropdownIcon {
    display: inline-flex;
    justify-content: flex-end;
    text-align: right;
    height: 100%;
    align-items: center;
  }

  .dropdownContent {
    background: white;
    position: absolute;
    margin: 0 15px 5px 15px;
    border: 1px solid black;
    border-top: none;
    padding: 1px 1px 1px 1px;
    z-index: 200;
    box-shadow: 0 1px 3px rgba(82, 81, 81, 0.322);
  }
}

Вот как выглядит раскрывающийся список содержимое поверх фактического раскрывающегося бита типа Like.