expand row custom css problems

[casha1995]

  isExpandableRow(row) {
    if (row.id > 3) return true;
    else return false;
  }

  expandComponent(row) {
    return (
      <div style={{cursor: 'default', width: '100%', backgroundColor: 'red'}} >        
        <h1>testing</h1>
      </div>
    );
  }
 const options = {
      onRowClick: this.onRowClick,
      onExpand: this.handleExpand,
      expandBodyClass: 'custom-expand-parent',
      expandBy: 'column',
      paginationSize: 3,
      hideSizePerPage: true,
      border: 'none',
      sizePerPage: 20,
      expandRowBgColor: 'rgb(242, 255, 163)' 
    };

expand Component the scope of the child

testing

is not filling the whole expand component col-span, in is the options , i managed to add class to the expand component ,and changed the css background , but i could n't manage to solve the height and width of the child , here is a pic to illustrate my point of view