Совместите компоненты React с дном контейнера

Question

У меня есть следующий компонент:

<div style={{display: 'flex', verticalAlign: "bottom"}}>
        <FormControl fullWidth margin="normal" className="col-3">
          <InputLabel style={colorStyle} htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
          <Input
            id={field_meta.name}
            defaultValue={field_meta.value? field_meta.value.id: ""}
            value={this.state.fieldContent}
            onChange={this.handleChange}
            margin="normal"
            startAdornment={field_meta.error &&
              <InputAdornment position="start">
                <i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
              </InputAdornment>
            }
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="Buscar Valor"
                  onClick={this.handleSearchClick}
                >
                  <i className={"zmdi zmdi-search"} onClick={this.handleSearchClick} />
                </IconButton>
              </InputAdornment>
            }
          />
          {() => {
            if (field_meta.error) {
              return <FormHelperText style={{color: "red"}}>{field_meta.error}</FormHelperText>
            } else if ( field_meta.originalValue) {
              return <FormHelperText style={{color: "orange"}}>Los cambios aún no se han guardado</FormHelperText>
            } else {
              return null;
            }
          }}
        </FormControl>
        {this.state.currentValue.id ? 
          <div className="col-9"><span>[{this.props.field_meta.value.id}]{this.props.field_meta.value.text}</span></div> : 
          <h2 className="col-9"></h2>}
      </div>

Я хочу, чтобы input и span выровнялись по дну контейнера. Я испробовал несколько рекомендаций, но всегда получаю один и тот же результат:

Answer 1

Атрибут css, чтобы получить то, что вам нужно, это:

style={{display: 'flex', align-items: "flex-end"}}

Имейте в виду, что направление flex по умолчанию равно row

Вы также можете получить элементы, находящиеся внизу, когда направление flex-direction: column, выполнив это:

style={{display: 'flex', flex-direction: 'column', justify-content: 'flex-end'}}

Имейте в виду также, что flex влияет на непосредственные дети, поэтому, бросая быстрый взгляд на ваш код, вы не должны применять flex к div, а к FormControl компоненту