垂直固定元素

Question

我不知道如何将#responsavel＃parkinson-date #progresso和#fases元素仅垂直固定。

＃grupo-de-entrega可以在水平和垂直方向上正常工作。

我正在为此使用reactjs和CSS。

这是reactjs部分：

render(){

    return (
        <div  className="head">
            <div id="grupo-de-entrega" className="block"><img src={Group} /><p>Grupo de Entrega</p></div>
            <div id="responsavel" className="block"><img src={User} /><p>Responsável</p></div>
            <div id="parkinson-date" className="block"><img src={Parkinson} /><p>Parkinson Date</p></div>
            <div id="progresso" className="block"><p>Progresso</p></div>
            <div id="fases" className="block"><img src={Group} /><p>Fases</p></div>
        </div>
    );
}

}

，这里是CSS：

@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');
.head {
    height: 32px;
    left: 0px;
    color: #E5E5E5;
    display: inline-flex;
    position: flex;
    margin-top: 61px;
    
    
    
}
.head .block {
    background: #313131;
    margin-right: 0px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    border: 1px;
    border-color: #000;
    border-style: solid;
}

.head p {
    margin-left: 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
}
.head #grupo-de-entrega {
    width: 364px;
    position: fixed;
    height: 32px;
    left: 0px;
    color: #E5E5E5;
    display: inline-flex;
 
}
.head #responsavel{
    width: 183px;
    margin-left: 364px;
    
}   
.head #parkinson-date{
    width: 222px;
}
.head #progresso {
    width: 223px;;
}
.head #fases {
    margin-left: 10px;
    width: 446px;;
}

感谢您的帮助。