css alignment problem in auto complete tag field

Question

I applied different css styles for 2 fields (autocomplete tag) in my form. But something is wrong in my alignment: if I click on the first field, the dropdown values overlap transparently on the next field. Like this:

I want to hide the second field (Timely filing2) input field.

<div className="add-list_value2" >

                    <ReactAutocomplete
                                name="Timely1"
                                items = {timelyData && timelyData.map(timelyDataObj =>(
                                    {options:timelyDataObj.Insurance, 
                                    values:timelyDataObj.TFID}
                                    ))
                                }
                                shouldItemRender={(item, value) => item.options.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                getItemValue={(item) => item.options}
                                renderItem={(item, highlighted) =>
                                    <div
                                    key={item.values}

                                    style={{ backgroundColor: highlighted ? '#3db4e5' : '#FFFFFF',cursor:'pointer', border:'1px solid lighten($grey-element,30%)',padding: '5px' }}
                                    >
                                    {item.options}
                                    </div>
                                }
                                inputProps={{placeholder:'Select...'}}
                                menuStyle={this.props.menuStyle}
                                wrapperStyle={this.props.wrapperStyle}
                                value={this.state.value}
                                onChange={this.onTimely1Change}
                                onSelect={this.onTimely1Change}
                            />
                    </div>   

My sass code:

 &_value2 {
         flex:2;
         white-space: normal;
         width: 100%;
         font-size: 14px;
         position: relative;
         z-index: 1;
         display: inline-block;

          input, textarea {
            width: 100%;
            min-width: 200px;
            height: 25px;
            border: 1px solid $grey-element;
            padding: 0 8px;
            font-size: 12px;
            border-radius: 2px;

          }

          &::after {
            position: absolute;
            right: 9px;
            top: 10px;
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px 3px 0 3px;
            border-color: $black transparent transparent transparent;
          }

          .react-datepicker {
            &-wrapper, &__input-container {
              width: 100%;
            }
          }

          textarea {
            height: 80px;
          }
        }

And this is the inline style:

      borderRadius: '3px',
      boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
      padding: '2px 0',
      fontSize: '90%',
      position: 'fixed',
      minWidth: '220px',
      overflow: 'auto',
      maxHeight: '250px',
      display: 'inline', 

How do I align it correctly?

Answer 1

I just add 2 css for both field and increases the z-index by 2 for second field..Its just works..