我需要用什么来保持文本处于垂直位置？

Question

在我的reactjs应用程序中。一个组件将通过更改stateproperty来显示/隐藏div。此组件的样式将根据这些cssrules（打开/关闭）而改变：

.open {
    display: block;
}

.close {
    display:none;
}
.rela {
    position: relative;
}

reactjs code：

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';

export class Hero extends Component {

    constructor(props, context) {
        super(props, context);

        this.toggle = this.toggle.bind(this);
        this.state = { open: false }
    }

    toggle() {
        console.log('toggle');
        this.setState({ open: !this.state.open });
        console.log(this.state.open);
    }

    render() {
        return (
            <div className="rela">
                <Button onClick={this.toggle.bind(this)}>Click this</Button>
                <div className={this.state.open ? 'open' : 'close'}>
                    show me
               </div>
            </div>
        );
    }
}

export default Hero;

在此组件下，还有另一个带有一些文本的组件。此时，一旦显示另一个组件（打开），该文本就会被按下。我需要用什么css将文本垂直保持在同一位置？该组件的CSS是：

.stuff {
        z-index: 1064;
        position: fixed;
        width: 100%;
        height: 20px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        background-color: #e2f1fc;
        padding-top: 7px;   
    }

reactjs code：

import React, { Component } from 'react';

export class Kid extends Component {
    render() {
        return (
              <div className="stuff">
                   some text : dont push me down
               </div>
        );
    }
}

export default Kid;