How to add elements in a Semantic React UI grid?

Question

I am using react semantic UI. I want to add a search bar in a grid system. The search bar should take almost entire width (see screenshot 2).

The search bar should be adjacent to an existing sidebar. Currently, I am able to add search bar adjacent to the sidebar but the width is not increasing of sidebar why so? I want search bar to have full width i.e till the end of right side of the screen.

Code:

export default class DashBoard extends Component {

  render() {

    return (
      <div className={styles.container}>
        <Grid stackable columns={3}>
        <Grid.Row>
          <Grid.Column className={styles.sideBar} width={3}>
            <Segment className={styles.sideBarContent}>
                <Header as='h3' className={styles.sideBarHeader}>DashBoard</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donations</Header>
                <Header as='h3' className={styles.sideBarHeader}>Events</Header>
                <Header as='h3' className={styles.sideBarHeader}>Reports</Header>
                <Header as='h3' className={styles.sideBarHeader}>Profile</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donor Intelligence</Header>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <div className={styles.searchBar}>
               <Search size='big'/>
            </div>
            <Segment className={styles.piechartContent}>
              <PieChart width={250} height={300}/>
            </Segment>
            <Segment className={styles.multilinechartContent}>
              <MultilineChart width={350} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment className={styles.barchartContent}>
              <BarChart width={475} height={375}/>
            </Segment>
            <Segment className={styles.donutchartContent}>
              <DonutChart width={375} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={2}>
            <Card className={styles.card1}>
              <Card.Content>
                <Card.Header className={styles.cardHeader1}>£93,300.56</Card.Header>
                <Card.Description className={styles.cardDescription1}>Remittances - All Time</Card.Description>
              </Card.Content>
            </Card>
            <Card className={styles.card2}>
              <Card.Content>
                <Card.Header className={styles.cardHeader2}>53</Card.Header>
                <Card.Description className={styles.cardDescription2}>Parishes / Churches</Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
    )
  }
}

Screenshots:

Screenshot 1:

Answer 1

You need two columns, and inside the main column you need two rows. (You many not need two actual row elements if things wrap properly, but it may help make the structure more clear to use rows.)

 _______________________________
|         | ___________________ |
|         || row w/ 1 col      ||
|         ||___________________||
|         | ___________________ |
|         ||         ||        ||
|         || row w/  ||        ||
|         || 2 cols  ||        ||
|         ||         ||        ||
|         ||         ||        ||
|         ||_________||________||
 _______________________________
    ^-- sidebar col
                     ^-- main col