Button with two row text

					
<div className="bnt-eta-container">
                <button onClick={this.props.onClick} type={this.props.type} disabled={this.props.isDisabled}>
                    <div className="info-text-div">
                        <span>{this.props.text}</span>
                        <span>{this.props.centerInfoTime}</span>
                    </div>
                    <span className={'btn-direction-icon ' + this.props.directionButtonIcon} ></span>
                </button>
            </div>				

					
SCSS Style:
div {
  .bnt-eta-container {
    display: flex;
    width: 100%;
    height: auto;
    button {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      font-size: 16px;
      background-color: $navy-blue;
      color: $white;
      width: 100%;
      height: auto;
      font-weight: bold;
      border: none;
      border-radius: 8px;
      padding: 5px;
      margin: 15px;
      height: 55px;
      cursor: pointer;
      outline: none;
      justify-content: space-between;
     button #light-btn-eta{
        background-color: gainsboro;
      }
      .info-text-div{
          display: flex;
          flex-direction: column;
         flex-grow: 1;

      }
      span {
        align-self: center;
       margin-right: 5px;
  
      }
    }
  }
}