html - 如何在 div 中垂直对齐多个内联 block 元素？ ( react )

<分区>

我试图垂直对齐 div 中的所有内容，这里是 html:

  <div style={this.CookieBarStyle}>
    <div style={this.CookieBarTextStyle}>
      <img src={CookieIcon} style={{display: 'inline-block'}}></img>
      <p style={{width: '90%', marginLeft: '50px', display: 'inline-block'}}>Utilizamos cookies propias y de terceros para obtener datos estadísticos de la navegación de nuestros usuarios y mejorar nuestros servicios.
        <br></br>Si acepta o continúa navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información <a href="#" style={this.CookieBarLinkStyle}>aquí.</a></p>
    </div>
    <div style={this.CookieBarButtonsStyle}>
      <Button text="No Acepto" bgColor="#DEDEDE" textColor="#404040" onClick={Hola}></Button>
      <span style={{width: '43px', display: 'inline-block'}}></span>
      <Button text="Estoy de Acuerdo" bgColor="#57DE7F" textColor="#F6F6F6" onClick={Hola}></Button>
    </div>
  </div>

这是 css(React 样式):

this.CookieBarStyle = {
  backgroundColor: '#F6F6F6',
  color: '#404040',
  padding: '8px 15px',
  boxSizing: 'content-box'
}
this.CookieBarTextStyle = {
  display: 'inline-block',
  width: '65%',
  paddingLeft: '35px'
}
this.CookieBarButtonsStyle = {
  display: 'inline-block',
  width: '30%',
  textAlign: 'right'
}
this.CookieBarLinkStyle = {
  color: '#525AB5'
}

这是它在 atm 上的截图: