親子間でブロック要素が配置されているとinline-blockがきかない

間違ったhtml↓

<div className='buttons'>
  <div className="basic-button-box">
    <Button className={props.styles} modifier="large" onClick={props.click} disabled={props.flag}>{props.text}<div className="right-arrow-box"><i class={props.svg} icon={{default: props.defaultSVG}} style={{color: "#fff", fontSize: props.fontSize}}></i></div></Button>
  </div>
</div>

正しいhtml↓

<div className='buttons'>
  <Button className={props.styles} modifier="large" onClick={props.click} disabled={props.flag}>{props.text}<div className="right-arrow-box"><i class={props.svg} icon={{default: props.defaultSVG}} style={{color: "#fff", fontSize: props.fontSize}}></i></div></Button>
</div>

.buttos{
    display: inline-block;
    margin: 0 10px;
  }